前端學(xué)習(xí)22 CSS 偽類和偽元素

1. 偽類

偽類是添加到選擇器的關(guān)鍵字，用于指定所選元素的特殊狀態(tài)。

偽類由冒號（:）后跟著偽類名稱組成（例如，:active）,函數(shù)式偽類還包含一對括號來定義參數(shù)（例如，:dir（））。

1.1 表示狀態(tài)的偽類

:link 所有為訪問的鏈接
:visited 所有訪問過的鏈接
:hover 鼠標(biāo)點擊標(biāo)簽的狀態(tài)
:activate 鼠標(biāo)點擊標(biāo)簽的狀態(tài)
:focus 標(biāo)簽獲得焦點時的樣式

注意：在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

注意：在CSS定義中，a:active 必須至于 a:hover 之后，才是有效的。

 <a href="www.cctv.com">www.cctv.com</a>
 
 <style>
     /*超鏈接點擊之前是黑色*/
     a:link {
         color: black;
     }
     /*超鏈接點擊之后是藍色*/
     a:visited {
         color: blue;
     }
     /*鼠標(biāo)懸停，放到標(biāo)簽上的時候是綠色*/
     a:hover {
         color: green;
     }
     /*鼠標(biāo)點擊鏈接，但是不松手的時候*/
     a:active {
         color: red;
     }
 </style>

1.2 樹結(jié)構(gòu)的偽類

這些偽類與文檔樹中的元素位置有關(guān)。

:root 表示文檔的根元素。在HTML中這通常是<html>元素。
:empty 表示除空白字符外沒有子元素的元素。用于選擇不包含任何子元素的元素。子元素可以是元素節(jié)點或文本（包括空格）。但是注釋、處理指令不會影響元素是否被認(rèn)定為空。

  div:empty {
             border:2px solid lightblue; ;
             height: 1em;
             width: 8em;
         }
		 
     <p>1.div下沒有子元素</p>
     <div></div>
     <p>2.div下有注釋內(nèi)容</p>
     <div><!-- 注釋內(nèi)容 --></div>
     <p>3.div嵌套了空元素</p>
     <div><p></p></div>  //看這里

1.3 語言的偽類

這類偽類根據(jù)文檔語言而反應(yīng)，可以基于語言或書寫方向來選擇元素。

:dir 方向性偽類基于由文檔語言所確定的其方向性來選擇元素

//dir 是 HTML 的標(biāo)準(zhǔn)屬性，用來控制文本書寫方向
.dir :dir(ltr) {
  color: blue;
}
.dir :dir(rtl) {
  color: green;
}

:lang 給予其內(nèi)容語言來選擇元素。

// lang 是 HTML 的標(biāo)準(zhǔn)屬性，用來告訴瀏覽器該元素的文本屬于哪種語言。
 *:lang(en-US) {
             border: 2px solid orangered;
         }
 ?
     <p lang="en-US"> //看這里
     Spring will come when spring goes.Flowers fade and flowers will bloom again.as long as you want.Let the dream row to your heart sea.
     </p>
     <p lang="pl-PL">
     Gdy widzimy znak z narysowan? czaszk? i napisem <strong lang="en-US">DANGER</strong> to lepiej nie wchodzi? do?rodka.
     </p>

1.4 否定偽類

:not() 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類。

 p:not(.irrelevant) {
   font-weight: bold;
 }
 //p > 是一個父子選擇器，表示：選擇 <p> 標(biāo)簽的直接子元素
 p > :not(strong, b.important) {
   color: darkmagenta;
 }

1.5 子元素的偽類

:first-child 選擇第一個子元素。
:last-child 選擇最后一個子元素。
:nth-child() 選擇指定位置的子元素。該選擇器后邊可以指定一個參數(shù)，指定要選中第幾個子元素。
:nth-last-child（）從后往前選擇指定位置的子元素。
:first-of-type 在同一個父元素下，選擇第一個特定類型的元素。
:last-of-type 在同一個父元素下，選擇最后一個特定類型的元素。
:nth-of-type（）在同一個父元素下，選擇指定位置的特定類型的元素?。
:nth-last-of-type（）在同一個父元素下，選擇從后往前選中指定類型指定位置的子元素。
:only-child? 只有一個子元素才有作用。
:target 表示一個唯一的元素（目標(biāo)元素），其?id?與當(dāng)前 URL 片段匹配。

:target{
 border:2px solid black;
 background-color:lightblue;
 } 
 //點擊鏈接,:target選擇器會突出顯示當(dāng)前活動的HTML錨.Internet Explore 8 以及更早的版本不支持 :target 選擇器
 <a href="#news1"><a>
 <a href="#news2"><a>
 <p id="news1">內(nèi)容1..</p>
 <p id="news2">內(nèi)容2..</p>