css3新增选择器盘点

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

1.属性选择器：

1. E[attribute] 表示存在attr属性即可；

   div[class]

2. E[attr=val] 表示属性值完全等于val；

   div[class=mydemo]

3. E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；

   div[class*=mydemo]

4. E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；

   div[class^=mydemo]

5. E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；

   div[class$=demos]

2.伪类选择器-伪元素选择器：

1. 之前学习的：a:hover a:link a:active a:visited

2. 以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类

   • E:first-child:查找E这个元素的父元素的第一个子元素E
   • E:last-child:最后一个子元素
   • E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
   • E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
   • E:nth-child(even): 所有的偶数
   • E:nth-child(odd): 所有的奇数
   • E:nth-of-type(n):指定类型
   • E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
   • E:target 结合锚点进行使用，处于当前锚点的元素会被选中
   • 重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效
   • 案例代码：

    /*第一个li元素*/
    li:first-child{
        color: red;
    }
    /*最后一个元素*/
    li:last-child{
        color: green;
    }
    /*获取第10个元素*/
    li:nth-child(10){
        color: orange;
    }
    /*获取倒数第3个li元素*/
    li:nth-last-child(3){
        color: purple;
    }
    /*获取索引顺序为6的倍数的li元素*/
    li:nth-child(6n){
        text-decoration: underline;
        border: 1px solid red;
    }
    /*获取所有索引为偶数的li元素*/
    li:nth-child(even){
        border: 1px solid black;
    }
    /*获取前5个li元素*/
    li:nth-child(-n+5){
        background-color: #ddd;
    }

3. n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等

3.伪元素选择器：

重点：E::before、E::after

• i.是一个行内元素，需要转换成块:display:block float:** position:
• ii.必须添加content,哪怕不设置内容，也需要content:””
• iii.E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理
• iv.E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
• v.E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式
• vi.注意：
  1. IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素
  2. CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类
  3. E::first-letter文本的第一个字母或字(不是词组)
  4. E::first-line 文本第一行
  5. E::selection 可改变选中文本的样式

前端进阶精选：点此去