第91天:CSS3 屬性選擇器、偽類選擇器和偽元素選擇器


一、屬性選擇器

其特點是通過屬性來選擇元素,具體有以下5種形式:

1、E[attr] 表示存在attr屬性即可;

   div[class]

2E[attr=val] 表示屬性值完全等於val

   div[class=mydemo]

3E[attr*=val] 表示的屬性值里包含val字符並且在“任意”位置;

     div[class*=mydemo]

4E[attr^=val] 表示的屬性值里包含val字符並且在“開始”位置;

      div[class^=mydemo]

5E[attr$=val] 表示的屬性值里包含val字符並且在“結束”位置;

  div[class$=demos]

二、偽類選擇器

除了以前學過的:link:active:visited:hoverCSS3又新增了其它的偽類選擇器。

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遵循線性變化,其取值01234... 但是當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選擇器

  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::beforeE::after

是一個行內元素,需要轉換成塊元素

E:afterE:before 在舊版本里是偽類,在新版本里是偽元素,新版本下E:afterE:before會被自動識別為E::afterE::before,按偽元素來對待,這樣做的目的是用來做兼容處理。

E::first-letter   文本的第一個字母(如中文、日文、韓文等);

案例:首字下沉

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

E::selection 可改變選中文本的樣式;

":" "::" 區別在於區分偽類偽元素

  關於beforeafter
      CSS2中 E:before或者E:after,是屬於偽類的,並且沒有偽元素的概念
      CSS3中 提出偽元素的概念 E::beforeE::after,並且歸屬到了偽元素當中,偽類里就不再存在E:before或者   E:after偽類;


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com