css3中的三种选择器

1. 选择器：

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

   1. 一 属性选择器：

   a)     E[attribute] 表示存在attr属性即可；

   div[class]

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

   div[class=mydemo]

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

   div[class*=mydemo]

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

   div[class^=mydemo]

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

   div[class$=demos]

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

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

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

   f)      E:first-child:查找E这个元素的父元素的第一个子元素E

   g)     E:last-child:最后一个子元素

   h)     E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素

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

   j)      E:nth-child(even): 所有的偶数

   k)     E:nth-child(odd): 所有的奇数

   l)       E:nth-of-type(n):指定类型

   m)    E:empty 选中没有任何子节点的E元素，注意，空格也算子元素

   n)     E:target 结合锚点进行使用，处于当前锚点的元素会被选中

   • o)     重点说明：n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效

   p)     案例代码：

   /*第一个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;
   }

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

   三伪元素选择器：

a)     重点：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伪类

b)     E::first-letter文本的第一个字母或字(不是词组)

c)      E::first-line 文本第一行

d)     E::selection 可改变选中文本的样式

css3中的三种选择器

原文：https://www.cnblogs.com/qdxbls/p/11057759.html