关于前端学习:CSS样式CSS选择器

根本选择器

标签选择器

• 应用 HTML 标签增加款式

   标签名 {款式名: 款式值;}
  
  <div></div>
  div{
    width: 100px;
    height: 100px;
  }

id 选择器

• 给 HTML 标签增加一个 id 属性

• id 属性的特点：每人 id 名在一个页面中只容许呈现一次，这叫做 id 的唯一性

  #id 名 {款式名: 款式值;}
  
  <div id="box"></div>
  #box{
    width: 100px;
    height: 100px;
  }

class 选择器

• 给 HTML 标签增加一个 class 属性

• 一个 class 名在页面中可呈现多个，每个标签能够有多个 class 名

  #class 名 {款式名: 款式值;}
  
  <div class="box"></div>
  .box{
    width: 100px;
    height: 100px;
  }

通配符

• 通配符是指所有标签都能够应用款式

  *{
    padding:0;
    margin:0;
  }

群组选择器

• 多个标签共用一个款式时，可将多个选择器同时设置雷同款式，打消代码冗余

   选择器 1, 选择器 2, 选择器 3, 选择器 4{款式名: 款式值;}
  
  div,#id,.class,*{
    width: 100px;
    height: 100px;
  }

选择器命名标准

• 不能应用特殊字符
• 尽量应用小写字母结尾
• 多个单词应用下划线（_）、连字符（-）、前面单词首字母大写形式命名
• 不能应用中文命名
• 语义化命名

选择器命名办法

• 下划线命名法：container_left
• 连字符命名法：container-left
• 驼峰式命名法：containerLeft

层级选择器

后辈选择器

• 抉择父选择器下所有合乎子选择器的子孙元素

   父选择器 子选择器 {款式名: 款式值;}
  
  ul li{
    width:100px;
    height:100px;
  }

父子选择器

• 抉择父选择器下所有合乎子选择器的子元素

   父选择器 > 子选择器 {款式名: 款式值;}
  
  ul > li{
    width:100px;
    height:100px;
  }

兄弟选择器

• 抉择雷同的父元素下符合条件的所有兄弟元素

   选择器 1 ~ 选择器 2{款式名: 款式值;}
  
  div ~ p{
    width:100px;
    height:100px;
  }

相邻选择器

• 抉择雷同的父元素下符合条件的第一个元素

   选择器 1 + 选择器 2{款式名: 款式值;}
  
  div + p{
    width:100px;
    height:100px;
  }

伪类选择器

• 同一个标签，依据其不同的种状态，有不同的款式，须要应用伪类选择器进行设置

   选择器: 伪类选择器 {款式名: 款式值;}

• 鼠标点击之前的状态 (只能设置给 a 元素)

   选择器:link{款式名: 款式值;}

• 鼠标点击时的状态 (只能设置给 a 元素)

   选择器:visited{款式名: 款式值;}

• 鼠标划入标签状态

   选择器:hover{款式名: 款式值;}

• 鼠标按下的状态

   选择器:active{款式名: 款式值;}

• 在元素之前增加或删除内容

   选择器::after{款式名: 款式值;}

• 在元素之后增加或删除内容

   选择器::before{款式名: 款式值;}

• 匹配表单元素禁用

   选择器::disabled{款式名: 款式值;}

• 匹配表单元素禁用

   选择器:disabled{款式名: 款式值;}

• 匹配表单元素选中

   选择器:checked{款式名: 款式值;}

• 匹配获取焦点元素

   选择器:fous{款式名: 款式值;}

属性选择器

• 应用元素的属性和属性值进行抉择元素

通过属性名进行抉择元素

 选择器 [属性名]{款式名: 款式值;}

<div class="box1">1</div>
<div>2</div>
div[class]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个 div 满足条件，所以第一个 div 款式失效 

通过属性名和属性值同时满足进行抉择元素

 选择器 [属性名 ="属性值"]{款式名: 款式值;}

<div class="box1">1</div>
<div class="box2">2</div>
div[class="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个 div 满足条件，所以第一个 div 款式失效 

通过属性名和属性值满足其中一项进行抉择元素

 选择器 [属性名 *="属性值"]{款式名: 款式值;}

<div class="box1">1</div>
<div class="box2">2</div>
div[class*="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
两个 div 都满足其中一个条件，所有都失效 

满足最后面的属性名和属性值进行抉择元素

 选择器 [属性名 ^="属性值"]{款式名: 款式值;}

<div class="box box1">1</div>
<div class="box1 box2">2</div>
div[class^="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第二个 div 的第一个 class="box1" 满足条件，所以只对第二个 div 失效 

满足最初面的属性名和属性值进行抉择元素

 选择器 [属性名 $="属性值"]{款式名: 款式值;}

<div class="box box1">1</div>
<div class="box1 box2">2</div>
div[class$="box1"]{
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px;
}
只有第一个 div 的最初一个 class="box1" 满足条件，所以只对第一个 div 失效 

属性组合匹配选择器：多个条件同时满足

构造伪类选择器（角标从 0 开始）

类型选择器

 选择器:nth-of-type(角标){款式名: 款式值;}

孩子选择器

 选择器:nth-of-child(角标){款式名: 款式值;}

第一个选择器（角标从 0 开始）

 选择器:first-of-type{款式名: 款式值;}

最初一个选择器（角标从 0 开始）

 选择器:last-of-type{款式名: 款式值;}

惟一选择器（角标从 0 开始）

 选择器:only-of-type{款式名: 款式值;}

选择器权重关系

• !important > 行内款式 (1000) > id 选择器 (100) > class 选择器 (10) > 标签选择器 (1) > 通配符
• 群组选择器不扭转选择器的权重
• 应用 !important 能够晋升款式的权重
• 层级选择器应用相加法或者约分法进行表权重关系

款式继承

• 继承父级款式，文字相干款式能够继承，布局款式不能被继承（设置 inherit 后可继承）