總結經常使用僞類與僞元素

總結經常使用僞類與僞元素

僞類和僞元素是爲了格式化 DOM 樹之外的信息而被引入的。

僞類

一個 CSS 僞類是以一個冒號(:)做爲前綴，被添加到一個選擇器末尾的關鍵字，可讓指定的元素在特定的狀態呈現指定的樣式。例如 :hover，當用戶懸停在指定元素時，能夠在這個狀態給指定元素添加相應的樣式，是在 DOM 樹沒法描述的狀態下才能給元素添加樣式。

首先，睡覺的小喵咪上方是一些沒有亮的一些小燈泡

:first-child

:first-child 表示在一組兄弟元素中的第一個元素。

/* :first-child 沒有辦法點亮小燈泡，由於此時選中的是第一個 p 標籤 */

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

/* :first-child 點亮第一個小燈泡， 此時選中的是第一個 .bulb */
<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-child {
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

:first-of-type

:first-of-type表示一組兄弟元素中指定類型的第一個元素。

:first-of-type 選擇在父元素中第一個出現的 .bulb，而無論其在兄弟內的位置如何，點亮第一個小燈泡

<div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:first-of-type {
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

:last-child

:last-child 表示在一組兄弟元素中的最後一個元素(相似:first-child)。
點亮最後一個小燈泡

效果以下：

:last-of-type

:last-of-type表示一組兄弟元素中指定類型的最後一個元素(相似:first-of-type)。
點亮最後一個小燈泡

:not

一個否認僞類，用於匹配不符合參數選擇器的元素。

/* 點亮不含有 .not 的燈泡*/
 <div class="bulb-lists">
  <div class="bulb not"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb not"></div>
</div>

.bulb:not(.not) {
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

:nth-child(an+b)

:nth-child這個 CSS 僞類首先會找到當前元素的兄弟元素，而後按照位置的前後順序從1開始排序，選擇的結果爲第（an+b）個元素的集合（n=0，1，2，3...）。若是 an+b 爲 0，沒法選中任何元素。

1. :nth-child(4) 匹配位置爲 4 的元素

/*點亮了第三個燈泡，由於第三個燈泡在全部兄弟元素中排第4*/
 <div class="bulb-lists">
  <p>.bulb 的兄弟元素</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>

.bulb:nth-child(4){
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

2.:nth-child(2n) 匹配位置爲 二、四、六、8...的元素，可使用 :nth-child(even)代替。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
</div>

.bulb:nth-child(2n){
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

3.:nth-child(2n+1) 匹配位置爲 一、三、五、7...的元素，可使用 :nth-child(odd)代替。

.bulb:nth-child(2n+1){
  background-image: url('../assets/img/light.png')!important;
}

效果：

4.:nth-child(3n) 匹配位置爲 三、六、9...的元素。

.bulb:nth-child(3n){
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

:nth-of-type(an+b)

:nth-of-type與 nth-child 類似，不一樣之處在於它是隻匹配特定類型的元素。

<div class="bulb-lists">
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
 </div>
.bulb:nth-of-type(4){
  background-image: url('../assets/img/light.png')!important;
}

效果以下：

:nth-last-child(an+b)

:nth-last-child與nth-child類似，它是從最後一個子元素開始計數的。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
</div>
.bulb:nth-last-child(4){
  background-image: url('../assets/img/light.png')!important;
}

:nth-last-type

:nth-last-of-type與nth-of-type類似，不一樣之處在於它是從最後一個子元素開始計數的。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>.bulb 的兄弟元素 這是一個 p 標籤</p>
</div>

.bulb:nth-last-type(4){
  background-image: url('../assets/img/light.png')!important;
}

僞元素

僞元素的前綴是兩個冒號 (::) ， 一樣是添加到選擇器後面去選擇某個元素的某個部分。僞元素建立了不存在 DOM 樹中的元素，併爲其添加樣式。例如，::after 選擇元素後，在其內容後使用 content 添加內容。雖然能夠看到添加的內容，可是這些內容實際上不存在 DOM 樹中。

::after(:after)

使用::after會建立一個僞元素，該僞元素會成爲選中元素的最後一個子元素

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::after{
    content: '✨✨✨'
}

效果以下：

::before(:before)

使用::before會建立一個僞元素，該僞元素會成爲選中元素的最後一個子元素

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::before{
    content: '🌟🌟🌟'
}

效果以下：

::first-letter（:first-letter）

::first-letter選中某塊級元素第一行的第一個字母，而且文字所處的行以前沒有其餘內容。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！</p>
</div>

p::first-letter{
    color: #ffeb3b;
}

效果以下：

::first-line (:first-line)

::first-line 在某塊級元素的第一行應用樣式。第一行的長度取決於不少因素，包括元素寬度，文檔寬度和文本的文字大小。和其餘全部的 僞元素同樣，::first-line 不能匹配任何真實存在的html元素。::first-line 僞元素只能在塊容器中,因此,::first-line僞元素只能在一個display值爲block, inline-block, table-cell 或者 table-caption中有用。

<div class="bulb-lists">
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <div class="bulb"></div>
  <p>哇塞，好亮呀！<br>第二行</p>
</div>

p::first-line{
    color: #ffeb3b;
}

效果以下：

::selection

::selection 用於文檔中被用戶高亮的部分（好比使用鼠標或其餘選擇設備選中的部分）。

p::selection {
  background-color: #ffeb3b;
}

使用鼠標選中亮字，效果圖

兼容性

僞類的兼容性以下：

僞元素的兼容性以下：

參考文檔：

https://developer.mozilla.org...
http://www.alloyteam.com/2016...