本文首發於邊玉傑的技術博客

轉載請註明出處

僞類

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

首先，下方的正方形都沒有背景色：

1、:first-child

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

/* 所有正方形都沒有背景色，因爲此時選中的是 <p> 標籤*/
<div class="list">
     <p>.square 這是一個p標籤</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

/* 第 1 個正方形有背景色，因爲此時選中的是第一個 .square */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

2、:first-of-type

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

/* :first-of-type 選擇在父元素中第一個出現的 .square
而不管其在兄弟內的位置如何，第一個正方形有背景色 */
<div class="list">
     <p>.square 這是一個p標籤</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-of-type{
     background: orangered;
}

效果如下：

3、:last-child

:last-child 表示在一組兄弟元素中的最後一個元素（類似 :first-child）

/* :last-child 此時選中的是最後一個 .square
最後一個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-child{
     background: orangered;
}

效果如下：

4、:last-of-type

:last-of-type 表示一組兄弟元素中指定類型的最後一個元素（類似 :first-of-type）

/* :last-of-type 選擇在父元素中最後一個出現的 .square
而不管其在兄弟內的位置如何，最後一個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-of-type{
     background: orangered;
}

效果如下：

5、:not

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

/* 不含有 .not 的正方形有背景色*/
<div class="list">
     <div class="square not"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square not"></div>
</div>

.square:not(.not){
     background: orangered;
}

效果如下：

6、:nth-child(an+b)

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

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

/*第 3 個正方形有背景色 因爲第 3 個正方形在所有兄弟元素中排第 4 */
<div class="list">
     <p>.square 這是一個p標籤</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

 /*此時第 4 個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

6-2、:nth-child(2n) 匹配位置爲2、 4、6、8… 的元素，可以使用 :nth-child(even) 代替

/*第 2、 4、6、8 個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n) {
     background: orangered;
}

效果如下：

6-3、:nth-child(2n+1) 匹配位置爲1、 3、5、7… 的元素，可以使用 :nth-child(odd) 代替

/*第 1、 3、5、7 個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n+1) {
     background: orangered;
}

效果如下：

6-4、:nth-child(3n) 匹配位置爲 3、6、9… 的元素

/*第 3、6 個正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(3n) {
     background: orangered;
}

效果如下：

7、:nth-of-type(an+b)

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

<div class="list">
     <p>.square 這是一個p標籤</p> 
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-of-type(4) {
     background: orangered;
}

效果如下：

8、:nth-last-child(an+b)

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

.square:nth-last-child(4) {
     background: orangered;
}

效果如下：

9、:nth-last-of-type

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

.square:nth-last-of-type(4) {
     background: orangered;
}

效果如下：

僞元素

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

1、::after(:after)

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

p::after{
     content: "✨✨";
}

效果如下：

2、::before(:before)

使用 ::before 會創建一個僞元素，該僞元素會成爲選中元素的第一個子元素

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

p::before{
     content: "✨✨";
}

效果如下：

3、::first-letter(:first-letter)

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

p::first-letter{
     color: red;
}

效果如下：

4、::first-line(:first-line)

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

p::first-line{
     color: red;
}

效果如下：

5、::selection

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

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個p標籤</p>
</div>

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

CSS的僞類和僞元素你知道多少？

僞類

1、:first-child

2、:first-of-type

3、:last-child

4、:last-of-type

5、:not

6、:nth-child(an+b)

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

6-2、:nth-child(2n) 匹配位置爲2、 4、6、8… 的元素，可以使用 :nth-child(even) 代替

6-3、:nth-child(2n+1) 匹配位置爲1、 3、5、7… 的元素，可以使用 :nth-child(odd) 代替

6-4、:nth-child(3n) 匹配位置爲 3、6、9… 的元素

7、:nth-of-type(an+b)

8、:nth-last-child(an+b)

9、:nth-last-of-type

僞元素

1、::after(:after)

2、::before(:before)

3、::first-letter(:first-letter)

4、::first-line(:first-line)

5、::selection

兼容性

僞類的兼容性：

僞元素的兼容性：

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

CSS的僞類和僞元素你知道多少？

HTML進階教程

MongoDB 的安裝與配置

Node.js的安裝與配置

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結