css3高級(jí)選擇器的用法

這篇文章主要講解了“css3高級(jí)選擇器的用法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css3高級(jí)選擇器的用法”吧！

新邵網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

css3屬性選擇器

css3之屬性選擇器，其中包括：

代碼如下:

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

下面我將用實(shí)例演示它們的用法

css代碼：

代碼如下:

效果如圖1：

結(jié)構(gòu)性偽類(lèi)選擇器

1.偽類(lèi)選擇器

在講偽類(lèi)選擇器之前，我先說(shuō)下類(lèi)選擇器，類(lèi)選擇器的使用如下所示：

代碼如下:

偽類(lèi)選擇器,大家看到這個(gè)術(shù)語(yǔ)不是很懂，樓主跟你們一樣，但是看到下面的示例，立馬知曉：

代碼如下:

看到這大家頓時(shí)知道了吧，在css中我們最常用的偽類(lèi)選擇器是使用在a元素上。那么偽類(lèi)選擇器與類(lèi)選擇器額區(qū)別是,類(lèi)選擇器可以隨便起名字如“p.right”，
“p.left”；但是偽類(lèi)選擇器是css中已經(jīng)定義好的選擇器，不能隨便起名。

2.偽元素選擇器

偽元素選擇器是指并不是對(duì)真正的元素使用的選擇器，而是針對(duì)css中已經(jīng)定義好的偽元素使用的選擇器。

在css中有下面四個(gè)偽元素選擇器：

2.1.first-line偽元素選擇器(它用于某個(gè)元素中的第一行文字使用樣式，只能與塊級(jí)元素關(guān)聯(lián))

示例如下：

代碼如下:

<html>
<head>
<style type="text/css">
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head></p> <p><body>
<p>
This is a text.<br/>
That is a text.
</p>
</body>
</html>

2.2.first-letter偽元素選擇器(向文本的第一個(gè)字母添加特殊樣式,在 CSS2.1 之前，:first-letter 只能與塊級(jí)元素關(guān)聯(lián)。CSS2.1 擴(kuò)大了這個(gè)范圍，可以與任
何元素關(guān)聯(lián))

示例如下:

代碼如下:

<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head></p> <p><body>
<p>This is a text.</p>
</body>
</html>

2.3.before偽元素選擇器(在元素之前添加內(nèi)容)

這個(gè)偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容。默認(rèn)地，這個(gè)偽元素是行內(nèi)元素，不過(guò)可以使用屬性 display 改變這一點(diǎn).

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
li {list-style:none;}
li:before {content:'■'}
</style>
</head>
<body>
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

2.4.after偽元素選擇器(在元素之后添加內(nèi)容)

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
li {list-style:none;}
li:after {content:'--測(cè)試文字';color:red}
</style>
</head>
<body>
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

3. 4個(gè)基本結(jié)構(gòu)性偽類(lèi)選擇器

3.1.root選擇器（將樣式綁定到頁(yè)面的根元素中）

所謂根元素，是指位于文檔樹(shù)的最頂層結(jié)構(gòu)的元素，在html頁(yè)面上就是指包含整個(gè)頁(yè)面的“html”部分.

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
:root {background:yellow;}
body {background:red;}
</style>
</head>
<body>
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

ps:在使用樣式指定root元素與body元素的背景時(shí)，根據(jù)情況不同的指定條件，背景色的顯示范圍會(huì)有所變化，如上面的代碼不使用root選擇器來(lái)指定root元素
的背景色，只指定body元素的背景色，則整個(gè)頁(yè)面就變成紅色的了。

3.2.not選擇器(想對(duì)某個(gè)結(jié)構(gòu)使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個(gè)樣式，就使用not選擇器)

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
body *:not(p) {color:blue;}
</style>
</head>
<body>
<p>我是排除元素</p>
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

3.3.empty選擇器(指定當(dāng)元素的內(nèi)容為空時(shí)使用樣式)

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
table td {padding:10px;}
table td:empty {background:#DDD}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</p> <p></tr>
<tr>
<td>4</td>
<td>5</td>
<td></td>
</tr>
</p> <p></table>
</body>
</html>

3.4.target選擇器(使用target選擇器來(lái)對(duì)頁(yè)面中的某個(gè)target元素[該元素的id被當(dāng)作頁(yè)面的超鏈接類(lèi)使用]指定樣式，該樣式只有在用戶(hù)點(diǎn)擊了頁(yè)面中的超鏈接

，并且跳轉(zhuǎn)到target元素后起作用)

示例如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
:target {background:yellow;}
</style>
</head>
<body>
<a href="#div1">連接一</a>
<a href="#div2">連接一</a>
<div class="test" id="div1">內(nèi)容一</div>
<div id="div2">內(nèi)容二</p> <p></div>
</body>
</html>

4. 下面接著說(shuō)其它幾個(gè)選擇器

first-child,last-child,nth-child,nth-last-child這幾個(gè)選擇器能夠針對(duì)一個(gè)父元素中的第一個(gè)，最后一個(gè)，指定序號(hào)的子元素，甚至第偶數(shù)個(gè)，第奇數(shù)
個(gè)子元素進(jìn)行樣式指定。

4.1.first-child與last-child的運(yùn)用，first-child在ie7開(kāi)始被支持，其它現(xiàn)代瀏覽器都支持

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
.ul1 li:first-child {background:yellow;}
.ul1 li:last-child {background:red;}
</style>
</head>
<body>
<ul class="ul1">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

4.2.nth-child(表示第幾個(gè)元素),運(yùn)用如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
.ul1 li:nth-child(2) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

4.3.nth-last-child(表示倒數(shù)第幾個(gè)元素),運(yùn)用如下:

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
.ul1 li:nth-last-child(1) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
</body>
</html>

ps:nth-child與nth-last-child的序號(hào)是從1開(kāi)始，當(dāng)然也可以是關(guān)鍵詞或公式。；除了對(duì)指定序號(hào)的子元素使用樣式以外，還可以對(duì)某個(gè)父元素中的所有第奇
數(shù)個(gè)子元素或第偶數(shù)個(gè)子元素使用樣式。

4.3.1 nth-child 對(duì)某個(gè)父元素中的所有第奇數(shù)個(gè)子元素的樣式設(shè)置

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
.ul1 li:nth-child(odd) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
<li>項(xiàng)目4</li>
</p> <p><li>項(xiàng)目5</li>
<li>項(xiàng)目6</li>
<li>項(xiàng)目7</li>
</ul>
</body>
</html>

4.3.2 nth-last-child 對(duì)某個(gè)父元素中的所有倒數(shù)上去的第偶數(shù)個(gè)子元素的樣式設(shè)置

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
.ul1 li:nth-last-child(even) {background:yellow;}
</style>
</head>
<body>
<ul class="ul1">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
<li>項(xiàng)目4</li>
</p> <p><li>項(xiàng)目5</li>
<li>項(xiàng)目6</li>
<li>項(xiàng)目7</li>
</ul>
</body>
</html>

4.4.nth-of-type(匹配屬于父元素的特定類(lèi)型的第 N 個(gè)子元素的每個(gè)元素)

4.5.nth-last-of-type(配屬于父元素的特定類(lèi)型的第 N 個(gè)子元素的每個(gè)元素，從最后一個(gè)子元素開(kāi)始計(jì)數(shù))

好，既然知道他們的用處，那我們直接看個(gè)列子：

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
h3:nth-of-type(odd) {background:red;}
h3:nth-last-of-type(even) {background:green;}
</style>
</head>
<body>
<h3>標(biāo)題一</h3>
<p>內(nèi)容一</p>
<h3>標(biāo)題二</h3>
<p>內(nèi)容二</p>
<h3>標(biāo)題三</h3>
<p>內(nèi)容三</p>
</body>
</html>

5.only-child(匹配屬于其父元素的唯一子元素的每個(gè)元素)

其實(shí)“:nth-child(1):nth-last-child(1)”的結(jié)合用法

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 選擇器 </title>
<style type="text/css">
div p:only-child {background:red;}
</style>
</head>
<body>
<div>
<p>孩子一</p>
</div>
<div>
<p>孩子一</p>
<p>孩子二</p>
</div>
<div>
<p>孩子一</p>
<p>孩子二</p>
</p> <p><p>孩子三</p>
</div>
</body>
</html>

上面說(shuō)了那么多的css選擇器的示例運(yùn)用，有這些選擇器可以大幅度的提高開(kāi)發(fā)書(shū)寫(xiě)或修改樣式表是的工作效率，我其實(shí)一直期待使用這些css選擇器，可惜有IE

感謝各位的閱讀，以上就是“css3高級(jí)選擇器的用法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css3高級(jí)選擇器的用法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

新聞名稱(chēng)：css3高級(jí)選擇器的用法
網(wǎng)頁(yè)地址：http://muchs.cn/article38/iidhsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、建站公司、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、小程序開(kāi)發(fā)、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容