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
If you think my article is useful to you, please feel free to appreciate