第91天：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){

  （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選擇器

1.  :first-child  選擇某個元素的第一個子元素；
2.  :last-child  選擇某個元素的最後一個子元素；
3.  :nth-child()  選擇某個元素的一個或多個特定的子元素；
4.  :nth-last-child()  選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
5.  :nth-of-type()  選擇指定的元素；
6.  :nth-last-of-type()  選擇指定的元素，從元素的最後一個開始計算；
7.  :first-of-type  選擇一個上級元素下的第一個同類子元素；
8.  :last-of-type  選擇一個上級元素的最後一個同類子元素；
9.  :only-child  選擇的元素是它的父元素的唯一一個了元素；
10.  :only-of-type  選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
11.  :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僞類;