溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3高級選擇器的用法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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：
結構性偽類選擇器
1.偽類選擇器
在講偽類選擇器之前，我先說下類選擇器，類選擇器的使用如下所示：
代碼如下:
<style type="text/css">
p.p_test {color:#F60;}
</style>
偽類選擇器,大家看到這個術語不是很懂，樓主跟你們一樣，但是看到下面的示例，立馬知曉：
代碼如下:
<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元素上。那么偽類選擇器與類選擇器額區別是,類選擇器可以隨便起名字如“p.right”，
“p.left”；但是偽類選擇器是css中已經定義好的選擇器，不能隨便起名。
2.偽元素選擇器
偽元素選擇器是指并不是對真正的元素使用的選擇器，而是針對css中已經定義好的偽元素使用的選擇器。
在css中有下面四個偽元素選擇器：
2.1.first-line偽元素選擇器(它用于某個元素中的第一行文字使用樣式，只能與塊級元素關聯)
示例如下：
代碼如下:
<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 只能與塊級元素關聯。CSS2.1 擴大了這個范圍，可以與任
何元素關聯)
示例如下:
代碼如下:
<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偽元素選擇器(在元素之前添加內容)
這個偽元素允許創作人員在元素內容的最前面插入生成內容。默認地，這個偽元素是行內元素，不過可以使用屬性 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偽元素選擇器(在元素之后添加內容)
示例如下:
代碼如下:
<!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個基本結構性偽類選擇器
3.1.root選擇器（將樣式綁定到頁面的根元素中）
所謂根元素，是指位于文檔樹的最頂層結構的元素，在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元素的背景時，根據情況不同的指定條件，背景色的顯示范圍會有所變化，如上面的代碼不使用root選擇器來指定root元素
的背景色，只指定body元素的背景色，則整個頁面就變成紅色的了。
3.2.not選擇器(想對某個結構使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，就使用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選擇器(指定當元素的內容為空時使用樣式)
示例如下:
代碼如下:
<!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被當作頁面的超鏈接類使用]指定樣式，該樣式只有在用戶點擊了頁面中的超鏈接
，并且跳轉到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">內容一</div>
<div id="div2">內容二</p>
<p></div>
</body>
</html>
4. 下面接著說其它幾個選擇器
first-child,last-child,nth-child,nth-last-child這幾個選擇器能夠針對一個父元素中的第一個，最后一個，指定序號的子元素，甚至第偶數個，第奇數
個子元素進行樣式指定。
4.1.first-child與last-child的運用，first-child在ie7開始被支持，其它現代瀏覽器都支持
代碼如下:
<!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(表示倒數第幾個元素),運用如下:
代碼如下:
<!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開始，當然也可以是關鍵詞或公式。；除了對指定序號的子元素使用樣式以外，還可以對某個父元素中的所有第奇
數個子元素或第偶數個子元素使用樣式。
4.3.1 nth-child 對某個父元素中的所有第奇數個子元素的樣式設置
代碼如下:
<!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 對某個父元素中的所有倒數上去的第偶數個子元素的樣式設置
代碼如下:
<!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 個子元素的每個元素，從最后一個子元素開始計數)
好，既然知道他們的用處，那我們直接看個列子：
代碼如下:
<!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>內容一</p>
<h3>標題二</h3>
<p>內容二</p>
<h3>標題三</h3>
<p>內容三</p>
</body>
</html>
5.only-child(匹配屬于其父元素的唯一子元素的每個元素)
其實“:nth-child(1):nth-last-child(1)”的結合用法
代碼如下:
<!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選擇器的示例運用，有這些選擇器可以大幅度的提高開發書寫或修改樣式表是的工作效率，我其實一直期待使用這些css選擇器，可惜有IE
感謝各位的閱讀，以上就是“css3高級選擇器的用法”的內容了，經過本文的學習后，相信大家對css3高級選擇器的用法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
