CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

属性选择器

其特点是通过属性来选择元素，具体有以下5种形式：

  • E[attr] 表示存在attr属性即可；例如：div[class]
  • E[attr=val] 表示属性值完全等于val；例如：div[class=mydemo]
  • E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；例如:div[class*=mydemo]
  • E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；例如:div[class^=mydemo]
  • E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；例如div[class$=demos]

伪类选择器

  • link、:active、:visited、:hover。
  • 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。

  • 通过E来确定元素的父元素。

    • E:first-child第一个子元素
    • E:last-child最后一个子元素
    • E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
      div>ul>li:nth-child(3){
         color: deeppink;
}
    • 第三个元素

    E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；

    div>ul>li:last-child(2){
       color: deeppink;
}
    • n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。

    选中所有的奇数的li

    li:nth-child(2n-1){
    color: red;
}
    • 选中所有的7 的倍数的li
    li:nth-child(7n){
    color: red;
  }

    • 选中前面五个

      li:nth-child(-1n+5){
 color: red;
}

    • 选中后面五个

      li:nth-last-child(-1n+5){
color: red;
}
    • 所有的偶数
     li:nth-child(even){
    color:red
}
    • 所有的奇数
     li:nth-child(odd){
    color:blue;
 }
    • n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
    • E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）没有任何的子元素，包括空格.

  • 目标伪类
    E:target 结合锚点进行使用，处于当前锚点的元素会被选中；

     <li>
    <a href="#title1">CSS (层叠样式表)</a>
 </li>
 <h2 id="title1">CSS (层叠样式表)</h2> 
 h2:target{
   color:red;
 }

    伪元素选择器

    E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
    E:after、E:before通过 css 模拟出来html标签的效果，必须有content属性才行；
    E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；
    E::first-line 文本第一行； 文本第一行高亮.
    E::selection 可改变选中文本的样式；

Last modification：July 8, 2018
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate