總結(jié)各種CSS3選擇器的介紹及具體語(yǔ)法
（一）屬性選擇器
在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎(chǔ)上對(duì)屬性選擇器進(jìn)行了擴(kuò)展，新增了3個(gè)屬性選擇器，使得屬性選擇器有了通配符的概念，這三個(gè)屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強(qiáng)大的屬性選擇器。如下表所示：
html代碼：
<a href="xxx.pdf">我鏈接的是PDF文件</a><a href="#" class="icon">我類(lèi)名是icon</a><a href="#" title="我的title是more">我的title是more</a>
css代碼：
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
(二)結(jié)構(gòu)性偽類(lèi)選擇器
1）:root選擇器：
從字面上就可以很清楚的理解是根選擇器，它的意思是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
html代碼：
<div>:root選擇器的演示</div>
css代碼：
:root {
background:orange;
}":root"選擇器等同于<html>元素，即：
:root{background:orange}
html {background:orange;}
得到的效果等同，建議使用:root方法。
偽元素的優(yōu)先級(jí)大于非偽元素的優(yōu)先級(jí)， :root > *>body 的優(yōu)先級(jí) :root（結(jié)構(gòu)偽類(lèi)選擇器）=HTML
2):not選擇器
稱(chēng)為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。
就拿form元素來(lái)說(shuō)，比如說(shuō)想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫(xiě)成：
注意:not需要緊跟后面，前面不能有空格
input:not([type="submit"]){
border:1px solid red;
}
3）:empty選擇器
表示的就是空。用來(lái)選擇沒(méi)有任何內(nèi)容的元素，這里沒(méi)有內(nèi)容指的是一點(diǎn)內(nèi)容都沒(méi)有，哪怕是一個(gè)空格。
html代碼：
<p>我是一個(gè)段落</p><p> </p><p></p>
css代碼
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
效果：
4):target選擇器
稱(chēng)為目標(biāo)選擇器，用來(lái)匹配文檔(頁(yè)面)的url的某個(gè)標(biāo)志符的目標(biāo)元素。
例：點(diǎn)擊鏈接顯示隱藏的段落
html代碼：
<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand"> content for Brand</div>
css代碼：
.menuSection{
display: none;
}
:target{/*這里的:target就是指id="brand"的div對(duì)象*/
display:block;
}效果：
1、具體來(lái)說(shuō)，觸發(fā)元素的URL中的標(biāo)志符通常會(huì)包含一個(gè)#號(hào)，后面帶有一個(gè)標(biāo)志符名稱(chēng)，上面代碼中是：#brand
2、：target就是用來(lái)匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個(gè)div元素。
多個(gè)url（多個(gè)target）處理：
上面的例子中，#brand與后面的id="brand"是對(duì)應(yīng)的，當(dāng)同一個(gè)頁(yè)面上有很多的url的時(shí)候可以取不同的名字，只要#號(hào)后對(duì)的名稱(chēng)與id=""中的名稱(chēng)對(duì)應(yīng)就可以了。
如下面例子：可以對(duì)不同的target對(duì)象分別設(shè)置不同的樣式。
html代碼：
<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand"> content for Brand</div><h2><a href="#jake">Brand</a></h2><div class="menuSection" id="jake"> content for jake</div><h2><a href="#aron">Brand</a></h2><div class="menuSection" id="aron"> content for aron</div>
css代碼：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
5) :first-child選擇器
表示的是選擇父元素的第一個(gè)子元素的元素E。就是選擇元素中的第一個(gè)子元素，注意是子元素，而不是后代元素。
html代碼：
<ul> <li><p>Link1</p></li> <li><p>Link2</p></li> <li><p>Link3</p></li></ul>
css代碼：
ul > li:first-child {
color: red;
}>是子元素選擇器，空格是后代選擇器，他們的區(qū)別：
后代選擇器：匹配父子關(guān)系和祖先-后代關(guān)系
子元素選擇器：匹配父子關(guān)系
>（子元素選擇器）只是匹配到它下面的一層，而不是多層。
即：ul>li 表示父子的關(guān)系
ul li 表示子，孫，子子孫孫，孫孫子子，子孫子孫...
6）:last-child選擇器
與 :first-child選擇器作用類(lèi)似，不同的是 :last-child選擇器選擇的是元素的最后一個(gè)子元素
7) :nth-child(n) 選擇器
用來(lái)定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。
其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達(dá)式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，
但參數(shù)n的起始值始終是1，而不是0。也就是說(shuō)，參數(shù)n的值為0時(shí)，選擇器將選擇不到任何匹配的元素。
當(dāng) :nth-child(n)選擇器中的n為一個(gè)表達(dá)式時(shí)，其中n是從0開(kāi)始計(jì)算，當(dāng)表達(dá)式的值為0或小于0的時(shí)候，不選擇任何匹配的元素
例：將偶數(shù)行列表背景色設(shè)置為橙色
html代碼：
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li></ol>
css代碼：
參數(shù)也可以是odd三個(gè)單詞奇數(shù)，even四個(gè)單詞偶數(shù)
ol > li:nth-child(2n){
background: orange;
}8）:nth-last-child(n)選擇器
和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個(gè)"last"，所起的作用和":nth-child(n)"選擇器有所區(qū)別，
從某父元素的最后一個(gè)子元素開(kāi)始計(jì)算，來(lái)選擇特定的元素。
9）:first-of-type選擇器
類(lèi)似于 :first-child選擇器，不同之處就是指定了元素的類(lèi)型,其主要用來(lái)定位一個(gè)父元素下的某個(gè)類(lèi)型的第一個(gè)子元素。
10):nth-of-type(n)選擇器
和:nth-child(n)選擇器非常類(lèi)似，不同的是它只計(jì)算父元素中指定的某種類(lèi)型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類(lèi)型的子元素時(shí)，使用:nth-of-type(n)選擇器來(lái)定位于父元素中某種類(lèi)型的子元素是非常方便和有用的。在:nth-of-type(n)選擇器中的n和:nth-child(n)選擇器中的n參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞。
11) :last-of-type選擇器
和:first-of-type選擇器功能是一樣的，不同的是他選擇是父元素下的某個(gè)類(lèi)型的最后一個(gè)子元素。
12):nth-last-of-type(n)選擇器
和:nth-of-type(n)選擇器是一樣的，選擇父元素中指定的某種子元素類(lèi)型，但它的起始方向是從最后一個(gè)子元素開(kāi)始，而且它的使用方法類(lèi)似于:nth-last-child(n)選擇器。
13) :only-child選擇器
選擇的是父元素中只有一個(gè)子元素，而且只有唯一的一個(gè)子元素。也就是說(shuō)，匹配的元素的父元素中僅有一個(gè)子元素，而且是一個(gè)唯一的子元素。
html代碼：
<div class="post"> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p></div><div class="post"> <p>我是一個(gè)段落</p></div>
css代碼：
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
效果：
14) :only-of-type選擇器
用來(lái)選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類(lèi)型的子元素。換一種說(shuō)法，“:only-of-type”是表示一個(gè)元素他有很多個(gè)子元素，而其中只有一種類(lèi)型的子元素是唯一的，使用:only-of-type選擇器就可以選中這個(gè)元素中的唯一一個(gè)類(lèi)型子元素。
15）:enabled選擇器
在Web的表單中，有些表單元素有可用（:enabled）和不可用（:disabled）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)。那么可以通過(guò)偽選擇器 :enabled對(duì)這些表單元素設(shè)置樣式。
16) :disabled選擇器
剛好與 :enabled選擇器相反，用來(lái)選擇不可用表單元素。要正常使用 :disabled選擇器，需要在表單元素的HTML中設(shè)置"disabled"屬性。
17):checked選擇器
在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。（要覆寫(xiě)這兩個(gè)按鈕默認(rèn)樣式比較困難）。在CSS3中，可以通過(guò)狀態(tài)選擇器:checked選擇器配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。而“:checked”表示的是選中狀態(tài)。
例：通過(guò)“:checked”狀態(tài)來(lái)自定義復(fù)選框效果。
html代碼：
1 <form action="#"> 2 <div class="wrapper"> 3 <div class="box"> 4 <input type="checkbox" checked="checked" id="usename" /><span>√</span> 5 </div> 6 <lable for="usename">我是選中狀態(tài)</lable> 7 </div> 8 9 <div class="wrapper">10 <div class="box">11 <input type="checkbox" id="usepwd" /><span>√</span>12 </div>13 <label for="usepwd">我是未選中狀態(tài)</label>14 </div>15 </form>
css代碼：
1 form { 2 border: 1px solid #ccc; 3 padding: 20px; 4 width: 300px; 5 margin: 30px auto; 6 } 7 8 .wrapper { 9 margin-bottom: 10px;10 }11 12 .box {13 display: inline-block;14 width: 20px;15 height: 20px;16 margin-right: 10px;17 position: relative;18 border: 2px solid orange;19 vertical-align: middle;20 }21 22 .box input {23 opacity: 0;24 position: absolute;25 top:0;26 left:0;27 }28 29 .box span {30 position: absolute;31 top: -10px;32 right: 3px;33 font-size: 30px;34 font-weight: bold;35 font-family: Arial;36 -webkit-transform: rotate(30deg);37 transform: rotate(30deg);38 color: orange;39 }40 41 input[type="checkbox"] + span {42 opacity: 0;43 }44 45 input[type="checkbox"]:checked + span {46 opacity: 1;47 }
效果如圖：
18) ::selection選擇器
"::selection"偽元素是用來(lái)匹配突出顯示的文本(改變用鼠標(biāo)選擇文本時(shí)的文本背景和顏色)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁(yè)文本是以“深藍(lán)的背景，白色的字體”顯示的。
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。
2、Firefox 支持替代的 ::-moz-selection。
css代碼：
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
19）:read-only選擇器
用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單理解就是，元素中設(shè)置了readonly=’readonly’
readonly 屬性規(guī)定輸入字段為只讀。
只讀字段是不能修改的。不過(guò)，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。
readonly 屬性可以防止用戶對(duì)值進(jìn)行修改，直到滿足某些條件為止（比如選中了一個(gè)復(fù)選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態(tài)。
readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。
例：通過(guò)“:read-only”選擇器來(lái)設(shè)置地址文本框的樣式。
html代碼：
<form action="#"> <div> <label for="name">姓名:</label> <input type="text" name="name" id="name" placeholder="大漠" /> </div> <div> <label for="address">地址:</label> <input type="text" name="address" id="address" placeholder="中國(guó)上海" readonly="readonly" /> </div></form>
css代碼：
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
}
input[type="text"]:-moz-read-only{
border-color: #ccc;
}
input[type="text"]:read-only{
border-color: #ccc;
}
效果：
20）:read-write選擇器
與:read-only選擇器相反，主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
21) ::before和::after
這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。
例：實(shí)現(xiàn)圖片陰影效果
效果圖：
完整代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8 /> 5 <title>before、after</title> 6 <style> 7 .box h3{ 8 text-align:center; 9 position:relative;10 top:80px;11 }12 .box {13 width:70%;14 height:200px;15 background:#FFF;16 margin:40px auto;17 }18 19 .effect{20 position:relative; 21 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;22 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;23 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;24 }25 .effect::before, .effect::after{26 content:"";27 position:absolute; 28 z-index:-1;29 -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);30 -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);31 box-shadow:0 0 20px rgba(0,0,0,0.8);32 top:50%;33 bottom:0;34 left:10px;35 right:10px;36 -moz-border-radius:100px / 10px;37 border-radius:100px / 10px;38 }39 </style>40 </head>41 <body>42 <div class="box effect">43 <h3>Shadow Effect </h3>44 </div>45 </body>46 </html>
上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效。
為了給box加一個(gè)立體且有弧度的效果，僅給box添加box-shadow不足以表現(xiàn)出來(lái)，所以，在box前后都添加了一個(gè)偽元素（其實(shí)兩個(gè)偽元素是重合的），該偽元素的border- radius設(shè)定了弧度，再給偽元素添加box-shadow，因此它的陰影也是有弧度的，但是，效果只需要偽元素的下邊緣陰影，因此給偽元素z-index設(shè)為-1，所以偽元素除下邊緣陰影外的地方都被蓋住了。（刪掉z-index屬性可以看到完整的偽元素）
class="box effect"，是類(lèi)選擇器的知識(shí)，及表示class=“box”與class="effect"的組合。如果把.effect換成.box效果依然相同，用.effect表示語(yǔ)義更加明白。
http://www.cnblogs.com/Josiah-Lin/p/6387827.html
延伸閱讀
- 知識(shí)和經(jīng)驗(yàn)的重要性 2023-04-15
- 來(lái)萬(wàn)碼學(xué)習(xí)，是我最正確的選擇 2022-09-07
- 知識(shí)的力量 2021-05-19
- 謝謝當(dāng)初的選擇 2020-06-11
- 選擇要趁早 2020-06-11
- 萬(wàn)碼學(xué)堂學(xué)員李*昊 [圣點(diǎn)世紀(jì)科技有限公司] 2019-12-10
- 很幸運(yùn)選擇了萬(wàn)碼——穆*杰 2019-10-28
- 做好了選擇，就要勇往直前 2019-07-11
- 知識(shí)點(diǎn)的歸納整理與應(yīng)用——張*朝 2019-07-05
- 一個(gè)選擇，一段新的征程——崔*浩 2019-05-09
知識(shí)和經(jīng)驗(yàn)的重要性