CSS 新增結(jié)購性偽類 4~6

提問人：劉團圓發(fā)布時間：2020-11-19

4.:nth-of-type(n)

使用:nth-of-type(n)選擇器匹配屬于父元素的特定類型的第N個子元素的每個元素，n可以是數(shù)字、關(guān)鍵詞或公式。

需要注意的是，nth-child和nth-of-type是不同的，前者是不論元素類型的，后者是從選擇器的元素類型開始計數(shù)。

在例題中，如果使用:nth-of-type(3)，會選到items3的元素，而不是items2的元素。

【例題】使用:nth-of-type(n)選擇器

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

ul li:nth-of-type(3){

color:red;

}

</style>

</head>

<body>

<ul>

<div>items0</div>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

</body>

</html>

參數(shù)n的用法與nth-child(n)中的參數(shù)n的用法相同。

5,:last-child

使用:iast-child選擇器匹配屬于父元素的最后一個子元素的每個元素。

6.:nth-last-of-type(n)

使用:nth-last-of-type(n)選擇器匹配屬于父元素的特定類型的第N個子元素的每個元素，從最后一個子元素開始計數(shù)，n可以是數(shù)字、關(guān)鍵詞或公式。

相關(guān)視頻回答

回復(fù)(0)