位置:首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS 新增結(jié)購(gòu)性偽類(lèi) 1~3

提問(wèn)人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-19

CSS3中新增的結(jié)構(gòu)性偽類(lèi)如下。

1.:root

匹配文檔的根元素。在HTML中,根元素永遠(yuǎn)是HTML。

2.:empty

匹配沒(méi)有任何子元素(包括text節(jié)點(diǎn))的元素E。

【例題】使用:empty選擇器

代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div:empty{

width: 100px;

height: 100px;

background: #f0f000;

}

</style>

</head>

<body>

<div>我是div的子級(jí),我是文本</div>

<div></div>

<div>

<span>我是div的子級(jí),我是span標(biāo)簽</span>

</div>

</body>

</html>

image.png

3.:nth-child(n)

    使用:nth-child(n)選擇器匹配屬于其父元素的第N個(gè)子元素,而不考慮元素的類(lèi)型,n可以是數(shù) 宇、關(guān)鍵詞或公式。

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

    代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

ul li:nth-child(2n+1){

color:red;

}

</style>

</head>

<body>

<ul>

<div>items0</div>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

</body>

</html>

image.png

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部