獻給CSS3初學者：選擇器用法總結
阿新 • • 發佈：2018-12-26
本篇部落格主要針對CSS3一個很常用的知識點進行歸納總結，那就是選擇器。目的：通過選擇器的使用，開發者可以快速地選取到目標元素。本篇通過以下幾方面介紹選擇器：
- 萬用字元
- 直接子節點
- 常用偽類選擇
- 位置選擇
- 屬性選擇
- 狀態選擇
- 過濾選擇
萬用字元
萬用字元包括三種：
（1）萬用字元^，表示開頭匹配。
（2）萬用字元$，表示結尾匹配。
（3）萬用字元*，表示包含匹配。
它的用法如下：
<style> div[id^="d"] { background-color: red; } /*--選擇div元素中id開頭為d字母的元素--*/ div[id$="1"] { background-color: red; } /*--選擇div元素中id結尾為1的元素--*/ div[id*="d"] { background-color: red; } /*--選擇div元素中id包含字母d的元素--*/ </style> <script> //jquery寫法 $(document).ready(function() { $("div[id^='d']").css("background-color", "red"); $("div[id$='1']").css("background-color", "red"); $("div[id*='d']").css("background-color", "red"); }); </script>
父結構直接子節點的選擇
父結構的直接子節點的選擇，需要通過大於號>來表示，它的用法如下：
<style> .red { background-color: red; } </style> <body> <ul class="myList"> <li> <a href="http://www.baidu.com">BaiDu</a> <ul> <li> <a href="css1-pdf">css1</a> </li> </ul> </li> </ul> </body> <script> //選中所有包含樣式myList的ul標籤下的<li>標籤的連線<a> //執行結果：文字Baidu、css1背景色變紅 $("ul.myList li a").addClass("red"); //選中所有包含樣式myList的ul標籤下的直接子節點<li>標籤的連線<a> //執行結果：僅文字Baidu背景色變紅 $("ul.myList>li>a").addClass("red"); </script>
偽類選擇:after、:before、:first-letter、:first-line
:after，表示在元素後插入內容。
:before，表示在元素前插入內容。
:first-letter，表示文字首字母。
:first-line，表示文字首行。
它們的用法如下：
<style> #e1:after { content: "after（網址）"; color: blue; } /*--在元素後插入內容--*/ #e2:before { content: "before（圖片）"; color: blue; } /*--在元素前插入內容--*/ #e3:first-letter { color: blue; } /*--文字首字母改變樣式--*/ #e4:first-line { color: blue; } /*--文字首行改變樣式--*/ </style> <body> <ul> <li> <a id="e1" href="http://www.baidu.com" target="_blank">百度</a> </li> <li> <a id="e2" href="http://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a> </li> <li> <div id="e3" id="p1">百度</div> </li> <li> <div id="e4" id="p2">百度</div> </li> </ul> </body>
效果圖：
通過jquery實現上述效果，可以是：
<style>
.after_add:after {
content: "after（網址）";
color: blue;
}
</style>
//效果相同，新增的內容包含在a標籤內
$("#e1").removeClass().addClass("after_add");
//效果不同，新增的內容不包含在a標籤
$("#e1").before("<span style='color: blue;'>after（網址）</span>");使用before和after實現的巢狀效果，如
<style>
#d1 h2.hot:after {
content: url(../../img/new.gif);
}
/*加熱點標籤*/
#d1 h2:before {
content: '第'counter(mc)'章 ';
color: #FAEBD7;
}
#d1 h2 {
counter-increment: mc;
}
/*連續編號*/
#d2 h2:before {
content: '第'counter(mc, upper-roman)'章 ';
color: #FAEBD7;
}
#d2 h2 {
counter-increment: mc;
}
/*指定編號：upper-alpha大寫英文字母，upper-roman大寫羅馬字母*/
#d3 h1:before {
content: counter(mc_max);
}
#d3 h1 {
counter-increment: mc_max;
counter-reset: mc_mid;
}
#d3 h2:before {
content: counter(mc_max)'.'counter(mc_mid);
margin-left: 40px;
}
#d3 h2 {
counter-increment: mc_mid;
counter-reset: mc_small;
}
#d3 h3:before {
content: counter(mc_max)'.'counter(mc_mid)'.'counter(mc_small);
margin-left: 80px;
}
#d3 h3 {
counter-increment: mc_small;
}
/*編號巢狀*/
#d4 h2:before {
content: open-quote;
}
#d4 h2:after {
content: close-quote;
}
#d4 h2 {
quotes: "("")";
}
/*左右兩邊新增符號*/
</style>
<body>
<div id="d1">
<h2 class="hot">鹿鼎記</h2>
</div>
<div id="d2">
<h2 class="hot">鹿鼎記</h2>
</div>
<div id="d4">
<h2>鹿鼎記</h2>
</div>
<div id="d3">
<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>
</div>
</body>效果圖：
位置選擇
位置選擇器包括以下幾種：
:first-child，選擇第一個元素
:last-child，選擇最後一個元素
:nth-child(3)，選擇第三個元素
:nth-last-child(3)，選擇倒數第三個元素
:nth-child(even)，選擇第偶數個元素
:nth-last-child(even)，選擇第倒數偶數個元素
:nth-child(odd)，選擇奇數個元素
:nth-last-child(odd)，選擇倒數奇數個函式
它們用法如下：
<style>
li:first-child {
background-color: yellow;
}
/*第一個*/
li:last-child {
background-color: yellow;
}
/*最後一個*/
li:nth-child(3) {
background-color: yellow;
}
/*第三個，索引從1開始*/
li:nth-last-child(3) {
background-color: yellow;
}
/*倒數第三個*/
li:nth-child(even) {
background-color: yellow;
}
/*偶數2、4、6*/
li:nth-last-child(even) {
background-color: yellow;
}
/*倒數偶數1、3、5，即奇數*/
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>其中，使用jquery的話，還有如下幾種型別的位置選擇器：
:first，選擇某元素集合的第一個
:eq(2)，選擇某元素集合的第三個，其索引值從0開始，注意與:nth-child(3)的區分
:lt(2)，選擇某元素集合的第三個之前的（不包括自身）所有該類元素
:gt(2)，選擇某元素集合的第三個之後的（不包括自身）所有該類元素
:last，選擇某元素集合的最後一個
它們的用法如下：
$("ul li:first-child").addClass("yellow"); //選中每個ul下的第一個li
$("ul li:last-child").addClass("yellow"); //選中每個ul的最後一個li
$("ul li:nth-child(3)").addClass("yellow"); //選中每個ul的第三個li
$("ul li:nth-last-child(3)").addClass("yellow"); //選中每個ul的倒數第三個li
$("ul li:nth-child(even)").addClass("yellow"); //選中每個ul的偶數li
$("ul li:nth-child(odd)").addClass("yellow"); //選中每個ul的奇數li
$("ul li:first").addClass("yellow"); //把ul下所有li合併作為集合，集合中的第一個li
$("ul li:eq(2)").addClass("yellow"); //把ul下所有li合併作為集合，集合中的第三個li
$("ul li:lt(2)").addClass("yellow"); //把ul下所有li合併作為集合，集合中的第三個li(不包括自身)之前的所有li
$("ul li:gt(2)").addClass("yellow"); //把ul下所有li合併作為集合，集合中的第三個li(不包括自身)之後的所有li
$("ul li:last").addClass("yellow"); //把ul下所有li合併作為集合，集合中的第最後一個li關於位置選擇器，還有一些值得注意的地方，如:nth-child和:nth-of-type的區別：
h2:nth-child(even)，是指父級結構內，第偶數元素是h2時，這意味著第偶個元素不一定是h2，新增樣式。
h2:nth-of-type(even)，是指父級結構內，第偶數h2元素，新增樣式。
如何迴圈樣式：
li:nth-child(3n+1),是指每3個選項開始迴圈樣式,+1表示每個迴圈的第1個選項
只有一個元素時的樣式：
li:only-child,是指只有一個選項時使用該樣式。
測試程式碼：
<style>
#d1 p:nth-of-type(even) {
background-color: yellow;
}
/*--奇數--*/
#d1 p:nth-of-type(odd) {
background-color: aliceblue;
}
/*--偶數--*/
#d2 li:nth-child(3n+1) {
background-color: yellow;
}
#d2 li:nth-child(3n+2) {
background-color: antiquewhite;
}
#d2 li:nth-child(3n+3) {
background-color: aqua;
}
/*迴圈*/
#d3 li:only-child {
background-color: red;
}
/*僅有一個*/
</style>
<body>
<div id="d1">
<p>奇數</p>
<p>偶數</p>
<p>奇數</p>
<p>偶數</p>
<p>奇數</p>
</div>
<div id="d2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div id="d3">
<ul>
<li>only one</li>
</ul>
</div>
</body>
屬性選擇
用法：$('元素[屬性]')即可、測試程式碼如下：
<style>
.red {
background-color: red;
}
</style>
<body>
<table id="languages">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr id="Smalltalk" title="Smalltalk">
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr id="c++" title="c++">
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>
</body>
<script>
var tr = "";
tr = $("tr").get(); //獲取所有<tr>標籤元素包裝集
tr = $("tr").get(1); //獲取所有<tr>標籤元素包裝集的第二個元素
tr = $("tr").slice(0, 2); //獲取所有<tr>標籤元素包裝集從0位置開始連續2個元素組成的包裝集
var index = $("tr").index($("tr#Smalltalk")); //獲取<tr>標籤元素包裝集中id為Smalltalk的下標
$('tr[id]').addClass("red"); //選中<tr>標籤中包括id屬性的元素包裝集新增red樣式
$("tr[id*='Sma']").addClass("red"); //選中<tr>標籤中包括id屬性且id包含Sma字樣的元素包裝集新增red樣式
$('tr[id]').add('tr[title]').addClass("red"); //選中<tr>標籤中包括id屬性的元素包裝集[或]包括title屬性的元素包裝集新增red樣式
$("tr[title]").not("tr[title*='c++']").addClass("red"); //選中<tr>標籤中包括title屬性的元素但title不包括c++的包裝集
$("tr[title]").filter("tr[title*='c++']").addClass("red"); //選中<tr>標籤中包括title屬性的元素且title包括c++字樣的包裝集
</script>狀態選擇
可供選擇的狀態類別如下：
E:hover，滑鼠經過
E:focus，獲取焦點
E:active，按下滑鼠還沒鬆開
E:enabled，可用狀態
E:disabled，不可用狀態
E:default，單選框或複選框預設狀態
E:checked，單選框或複選框選中狀態
E:indeterminate，單選框還沒開始選擇
E::selection，文字被選中時樣式
E[id="e1"]~E，id為e1的E元素的兄弟元素
E:read-only、E:read-write 指只讀、讀寫
E:invalid 指文字不能通過如元素required、pattern驗證時的樣式
E:valid 指文字通過如元素required、pattern驗證時的樣式
E:in-range、E:out-range 需設定min和max屬性，指當在三屬性內或超出屬性時的樣式
測試程式碼如下：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../../js/jquery/jquery-1.8.0.js"></script>
<style>
form input[type="text"]:hover {
background-color: greenyellow;
}
/*滑鼠經過*/
form input[type="text"]:focus {
background-color: skyblue;
}
/*獲取焦點*/
form input[type="text"]:active {
background-color: yellow;
}
/*按下滑鼠還沒鬆開*/
div[id="d1"] input:enabled {
background-color: #F0F8FF;
}
/*可用狀態*/
div[id="d1"] input:disabled {
background-color: red;
}
/*不可用狀態*/
div[id="d2"] input[type="checkbox"]:default {
outline: 2px solid blue;
}
/*單選框或複選框預設狀態*/
div[id="d2"] input[type="checkbox"]:checked {
outline: 2px solid red;
}
/*單選框或複選框選中狀態*/
div[id="d2"] input:indeterminate {
outline: 2px solid black;
}
/*單選框還沒開始選擇*/
div[id="d3"] p::selection {
background-color: red;
}
/*文字被選中時樣式*/
/*div[id="d4"] p[id="p1"]~p {
background-color: azure;
}*/
/*選中id為p1的兄弟元素*/
.yellow {
background-color: yellow;
}
/*jquery新增樣式效果*/
</style>
</head>
<body>
<!-- E:hover、E:focus、E:active 指經過、獲取焦點和啟用 -->
<form>
<p>姓名：<input type="text" name="name" /> </p>
<p>地址：<input type="text" name="address" /> </p>
</form>
<!-- E:enabled、E:disabled 指元素可用、不可用 -->
<div id="d1">
<input type="text" value="可用" />
<input type="text" disabled="disabled" value="不可用" />
</div>
<!-- E:default、E:checked、E:indeterminate 選擇框的三種狀態 -->
<div id="d2">
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="radio" name="radio" />
<input type="radio" name="radio" />
</div>
<!-- E::selection 文字被選中時的狀態 -->
<div id="d3">
<p>我是文字</p>
</div>
<!-- E~E1 選中E元素的所有E1兄弟元素 -->
<div id="d4">
<p id="p1">自己</p>
<p>兄弟1</p>
<p>兄弟2</p>
</div>
</body>
<script>
$(document).ready(function() {
$("#d4 p[id='p1']~p").addClass("yellow");
});
</script>
</html>
過濾選擇
過濾選擇器包括：
:not，排除
:filter，過濾
:empty， 表格項為空時的樣式設定，長用於表格內標籤樣式
:target，target元素的id被當頁面中的超連結使用
測試程式碼：
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title>偽類選擇器</title>
<script src="../../js/jquery/jquery-1.8.0.js"></script>
<style>
/*div:not([id="d1"]) {
background-color: aliceblue;
}*/
/*排除，該樣式排除了id為d1的div*/
td:empty {
background-color: #0000FF;
}
/*表格項為空時的樣式設定，長用於表格內標籤樣式*/
:target {
background-color: red;
}
/*target元素的id被當頁面中的超連結使用*/
</style>
</head>
<body>
<div id="d1">d1</div>
<div id="d2">d2</div>
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td></td>
<td>c</td>
</tr>
</table>
<p id="menu">
<a href="#t1">t1-示例文字</a>
<a href="#t2">t2-示例文字</a>
<a href="#t3">t3-示例文字</a>
</p>
<label id="t1">
示例文字1
</label>
<label id="t2">
示例文字2
</label>
<label id="t3">
示例文字3
</label>
</body>
<script>
$(document).ready(function() {
//$("div").not("div[id=d1]").css("background-color", "aliceblue");
$("div").css("background-color", "orange").filter("div[id=d1]").css("background-color", "aliceblue");
//console.log($("p").find("a")); //jquery中filter的用法,查詢後代
});
</script>
</html>