CSS 新增結購性偽類 7~9
7.:nth-last-child(n)
使用:nth-last-child(n)選擇器匹配屬于父元素的第N個子元素的每個元素,不論元素的類型,從最后一"t'子元素開始計數,n可以是數字、關鍵詞或公式。
8.:only-child
使用:only-child選擇器匹配屬于父元素的唯一子元素的每個元素。
【例題】使用:only-child選擇器
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:only-child{
color:red;
}
li:only-child{
color:green;
}
</style>
</head>
<body>
<div>
<p>items0</p>
</div>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
<span>items5</span>
</ul>
</body>
</html>
雖然分別對p和span元素設置了文本顏色屬性,但是只有p元素有效,因為p元素是div下的唯一子元素。
9.:only-of—type
使用:only-of-type選擇器匹配屬于父元素的特定類型的唯一子元素的每個元素。
【例題】使用:only-of-type選擇器
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:only-of-type{
color:red;
}
span:only-of-type{
color:green;
}
</style>
</head>
<body>
<div>
<p>items0</p>
</div>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
<span>items5</span>
</ul>
</body>
</html>
點擊加載更多評論>>