溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3高級選擇器的用法”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3高級選擇器的用法”吧！
css3屬性選擇器
css3之屬性選擇器，其中包括：
代碼如下:
1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]
下面我將用實例演示它們的用法
css代碼：
代碼如下:
<style type="text/css">
p[id=p_name] {color:red;}
p[id*=p] {border:1px solid #DDD;}
p[id^=start] {font-weight:700}
p[id$=end] {background:yellow}
</style>
效果如圖1：
結(jié)構(gòu)性偽類選擇器
1.偽類選擇器
在講偽類選擇器之前，我先說下類選擇器，類選擇器的使用如下所示：
代碼如下:
<style type="text/css">
p.p_test {color:#F60;}
</style>
偽類選擇器,大家看到這個術(shù)語不是很懂，樓主跟你們一樣，但是看到下面的示例，立馬知曉：
代碼如下:
<style type="text/css">
a:link {color:#F00; text-decoration:none;}
a:visited {color:#0F0; text-decoration:none;}
a:hover {color:#F0F; text-decoration:underline;}
a:active {color:#00F; text-decoration:none;}
</style>
看到這大家頓時知道了吧，在css中我們最常用的偽類選擇器是使用在a元素上。那么偽類選擇器與類選擇器額區(qū)別是,類選擇器可以隨便起名字如“p.right”，
“p.left”；但是偽類選擇器是css中已經(jīng)定義好的選擇器，不能隨便起名。
2.偽元素選擇器
偽元素選擇器是指并不是對真正的元素使用的選擇器，而是針對css中已經(jīng)定義好的偽元素使用的選擇器。
在css中有下面四個偽元素選擇器：
2.1.first-line偽元素選擇器(它用于某個元素中的第一行文字使用樣式，只能與塊級元素關(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偽元素選擇器(向文本的第一個字母添加特殊樣式,在 CSS2.1 之前，:first-letter 只能與塊級元素關(guān)聯(lián)。CSS2.1 擴大了這個范圍，可以與任
何元素關(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)容)
這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容。默認地，這個偽元素是行內(nèi)元素，不過可以使用屬性 display 改變這一點.
示例如下:
代碼如下:
<!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>項目1</li>
<li>項目2</li>
<li>項目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:'--測試文字';color:red}
</style>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
3. 4個基本結(jié)構(gòu)性偽類選擇器
3.1.root選擇器（將樣式綁定到頁面的根元素中）
所謂根元素，是指位于文檔樹的最頂層結(jié)構(gòu)的元素，在html頁面上就是指包含整個頁面的“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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
ps:在使用樣式指定root元素與body元素的背景時，根據(jù)情況不同的指定條件，背景色的顯示范圍會有所變化，如上面的代碼不使用root選擇器來指定root元素
的背景色，只指定body元素的背景色，則整個頁面就變成紅色的了。
3.2.not選擇器(想對某個結(jié)構(gòu)使用樣式，但是想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個樣式，就使用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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
3.3.empty選擇器(指定當元素的內(nèi)容為空時使用樣式)
示例如下:
代碼如下:
<!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選擇器來對頁面中的某個target元素[該元素的id被當作頁面的超鏈接類使用]指定樣式，該樣式只有在用戶點擊了頁面中的超鏈接
，并且跳轉(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. 下面接著說其它幾個選擇器
first-child,last-child,nth-child,nth-last-child這幾個選擇器能夠針對一個父元素中的第一個，最后一個，指定序號的子元素，甚至第偶數(shù)個，第奇數(shù)
個子元素進行樣式指定。
4.1.first-child與last-child的運用，first-child在ie7開始被支持，其它現(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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
4.2.nth-child(表示第幾個元素),運用如下:
代碼如下:
<!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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
4.3.nth-last-child(表示倒數(shù)第幾個元素),運用如下:
代碼如下:
<!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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
ps:nth-child與nth-last-child的序號是從1開始，當然也可以是關(guān)鍵詞或公式。；除了對指定序號的子元素使用樣式以外，還可以對某個父元素中的所有第奇
數(shù)個子元素或第偶數(shù)個子元素使用樣式。
4.3.1 nth-child 對某個父元素中的所有第奇數(shù)個子元素的樣式設(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>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</p>
<p><li>項目5</li>
<li>項目6</li>
<li>項目7</li>
</ul>
</body>
</html>
4.3.2 nth-last-child 對某個父元素中的所有倒數(shù)上去的第偶數(shù)個子元素的樣式設(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>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</p>
<p><li>項目5</li>
<li>項目6</li>
<li>項目7</li>
</ul>
</body>
</html>
4.4.nth-of-type(匹配屬于父元素的特定類型的第 N 個子元素的每個元素)
4.5.nth-last-of-type(配屬于父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數(shù))
好，既然知道他們的用處，那我們直接看個列子：
代碼如下:
<!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>標題一</h3>
<p>內(nèi)容一</p>
<h3>標題二</h3>
<p>內(nèi)容二</p>
<h3>標題三</h3>
<p>內(nèi)容三</p>
</body>
</html>
5.only-child(匹配屬于其父元素的唯一子元素的每個元素)
其實“: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>
上面說了那么多的css選擇器的示例運用，有這些選擇器可以大幅度的提高開發(fā)書寫或修改樣式表是的工作效率，我其實一直期待使用這些css選擇器，可惜有IE
感謝各位的閱讀，以上就是“css3高級選擇器的用法”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對css3高級選擇器的用法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
