CSS选择器及优先级

CSS选择器

• 1)标签选择器(标签)

语法： 元素名称{属性：属性值；...}

  span{  /* 选择所有的span标签*/
      padding:10px;
      background:cyan;
     }

• 2）id选择器（#）

语法： #id名{属性：属性值；...}

   #text{  /* 选择id="text"的标签*/
       width: 300px;
       height: 50px;
       line-height: 50px;
       margin: 15px 0px;
       text-align: center;
       background: hotpink;
   }

• 3）class选择器（.）

语法： .class名{属性：属性值；...}

   .box1{ 　/* 选择class="box1"的元素*/
       background: pink;
   }   

• 4）交集选择器

用于选择同时具有多个选择器匹配的元素

   div.box2{    /* 选择div并且class="box2"的元素*/
       background: yellow;
   }

• 5）并集选择器（群组选择器）（,）

语法： 选择器1,选择器2,选择器3{属性：属性值；...}

   h3,.list{  /* 选择h3以及class="list"的元素*/
       border: 1px solid blue;
   }

• 6）后代选择器(包含选择器)（用空格隔开）

语法： 父标签 子标签{属性：属性值；...}

   .box p a{ /* 选择.box后代中包含p的并且p下面包含a的*/
       color:orange;
       font-weight: bold;
   }

• 7）子元素选择器(>)

语法： 父标签>子标签{属性：属性值；...}

   .box>p>a{ /* 选择.box直级孩子为p并且p直级孩子是a的*/
       color:green;
   }

子代选择器与后代选择器的区别

• 8）属性选择器

语法：
E[attr] //用于选取带有指定属性的元素
E[attr = value]//用于选取带有指定属性值的元素
E[attr ~= value]//用于选取属性值中包含指定词汇的元素
E[attr |= value]//用于选取带有指定值value-开头的或者值为value的元素
E[attr ^= value] //用于选取属性值以value开头的元素
E[attr $= value] //用于选取属性值以value结尾的元素
E[attr *= value] //用于选取属性值中包含value的元素

css3中属性选择器的使用

• 9）结构伪类选择器
  1、伪类选择器
  类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，
  而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。

  最常见的伪类选择器
   a:link{ color: #ff6600 } /* 未被访问的链接 */  
   a:visited{ color: #87b291 } /* 已被访问的链接 */  
   a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */  
   a:active{ color: #55b28e } /* 正在被点击的链接 */ 
  

  2、伪元素选择器

  在CSS中，主要有四个伪元素选择器。
  * first-line伪元素选择器
  用于向某个元素中的第一行文字使用样式。
  * first-letter伪元素选择器
  用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
  * before伪元素选择器
  用于在某个元素之前插入一些内容。
  * after伪元素选择器
  用于在某个元素之后插入内容。

  3、结构性伪类选择器root、not、empty和target

  结构性伪类选择器
  * root选择器
  将样式绑定到页面的根元素中。
  * not选择器
  想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
  * empty选择器
  指定当元素中内容为空白时使用的样式。
  * target选择器
  对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

  4、选择器first-child、last-child、nth-child、nth-last-child、only-child

  • E:first-child选择器
    E:first-child单独指定第一个子元素的的样式。
  • E:last-child选择器
    E:last-child单独指定最后一个子元素的的样式。
  • E:nth-child选择器
    E:nth-child(n) 选择器匹配正数下来第 N 个子元素
    E:nth-child(odd)选择器匹配正数下来第奇数个子元素
    E:nth-child(even)选择器匹配正数下来第偶数个子元素
  • E:nth-last-child选择器
    E:nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
    E:nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
    E:nth-last-child(even)选择器匹配倒数下来第偶数个子元素
  • E:only-child选择器，只对唯一的子元素起作用
  • E:first-of-type 找第一个同类型的
  • E:last-of-type 找最后一个同类型的
  • E:nth-of-type选择器
    E:nth-of-type(n) 选择器所在父元素中同类型第n个位置匹配的子元素
    E:nth-of-type(odd)选择器所在父元素中同类型奇数位置匹配的子元素
    E:nth-of-type(even)选择器所在父元素中同类型偶数位置匹配的子元素
  • E:nth-last-of-type选择器
    E:nth-last-of-type(n) 选择器所在父元素中同类型倒数第n个位置匹配的子元素
    E:nth-last-of-type(odd)选择器所在父元素中同类型倒数奇数位置匹配的子元素
    E:nth-last-of-type(even)选择器所在父元素中同类型倒数偶数位置匹配的子元素
  • E:only-of-type 选择父元素只包含一个类型子元素的元素

  点击查看:first-child与first-of-type区别
  css3之结构性伪类选择器

• 10）UI状态伪类选择器
  所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！

• E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
• E:active选择器被用来指定元素被激活时使用的样式
• E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。
• E:enabled选择器被用来指定当元素处于可用状态时的样式。
• E:disabled选择器被用来指定当元素处于不可用状态时的样式。
• E:read-only选择器被用来指定当元素处于只读状态时的样式。
• E:read-write选择器被用来指定当元素处于非只读状态时的样式。
• E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
• E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
• E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
• E:selection伪类选择器用来指定当元素处于选中状态时的样式。
• E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
• E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
• E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
• E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
• E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
• E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

css3之UI元素状态伪类选择器

• 11）兄弟选择器

  通用兄弟元素选择器：它是用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

  语法：
  <子元素>~<子元素之后的同级兄弟元素>{
  CSS样式
  }

  相邻兄弟选择器：只选取该元素相邻的兄弟选择器

  语法：
  <子元素>+<子元素之后的同级兄弟元素>{
  CSS样式
  }

  css3之通用兄弟元素选择器

• 12）通配符选择器(全局选择器)（*）

    *{
        padding:0;
        margin:0;
    }
    div *{
        background"pink;
    }
  

CSS选择器优先级

CSS优先级：是由四个级别和各级别的出现次数决定的。
四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

优先级的算法：
　　每个规则对应一个初始"四位数"：0、0、0、0
　　若是 行内选择符，则加1、0、0、0
　　若是 ID选择符，则加0、1、0、0
　　若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
　　若是 元素选择符/伪元素选择符，则分别加0、0、0、1
　　算法：将每条规则中，选择符对应的数相加后得到的四位数，从左到右进行比较，大的优先级越高。

需注意的：
　　①、!important的优先级是最高的，但出现冲突时则需比较四位数;
　　②、优先级相同时，则采用就近原则，选择最后出现的样式;
　　③、继承得来的属性，其优先级最低;
　　
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。
　
　 CSS 选择器权重计算规则
　 CSS优先级及important属性