css3中的选择器

一、属性选择器

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

1、E[attr] 表示存在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]

二、伪类选择器

除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。

1、以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。

重点理解通过E来确定元素的父元素。

E:first-child 第一个子元素

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

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

 div>ul>li:nth-child(3){  //选中第三个li 

           color: deeppink;

}  

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

div>ul>li:last-child(2){  //选中倒数第二个li

         color: deeppink;

}

2、 n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效。

（1） 选中所有的奇数的li

   li:nth-child(2n-1){

       color: red;

   }

（2）选中所有的7 的倍数的li

li:nth-child(7n){

      color: red;

    }

（3） 选中前面五个

  li:nth-child(-n+5){

       color: red;

   }

（4） 选中后面五个

 li:nth-last-child(-n+5){

 color: red;

   }

（5）所有的偶数

  li:nth-child(even){

      color:red

   }

（6） 所有的奇数

  li:nth-child(odd){

      color:blue;

   }

注意：

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

E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）

没有任何的子元素，包括空格.

3、目标伪类

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

      <li><a href="#title1">CSS (层叠样式表)</a></li>

  <h2 id="title1">CSS (层叠样式表)</h2>

   h2:target{

    color:red;

  }

三、nth选择器

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 选择某个元素的一个或多个特定的子元素；

:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个了元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

四、伪元素选择器

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

是一个行内元素，需要转换成块元素

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

E::first-letter 文本的第一个字母或字（如中文、日文、韩文等）；

案例：首字下沉

E::first-line 文本第一行； 文本第一行高亮…

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

“:” 与 “::” 区别在于区分伪类和伪元素

关于before和after

  CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念

  CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者   E:after伪类;