選擇器
元素選擇器
- *{ }
- 通配選擇符 (*)
- 選定所有對象万细。
- 通常不建議使用通配選擇符陪拘，因?yàn)樗鼤闅v并命中文檔中所有的元素厂镇，出于性能考慮左刽，需酌情使用欠痴。
- E{ }
- 類型選擇符(E)
- 以文檔語言對象類型作為選擇符喇辽。
<style> h1{font-size:20px;} p{font-size:13px;} </style> <h1>標(biāo)題</h1> <p>正文內(nèi)容</p> -
#myid{ }
- ID選擇符
- 以唯一標(biāo)識符id屬性等于myid的E對象作為選擇符.
-
.myclass{ }
- 以class屬性包含myclass的E對象作為選擇符吠式。
關(guān)系選擇器
- E F{ }
- 包含選擇器特占，又稱之為：后代選擇器是目。
- 選擇所有被E元素包含的F元素。
- 與子選擇器不同的是揉抵，包含選擇符將會命中所有符合條件的后代冤今，包括兒子辟汰，孫子，孫子的孫子..
- E>F{ }
- 子選擇器
- 選擇所有作為E元素的子元素F凑术。
- 與包含選擇符不同的是淮逊，子選擇符只能命中子元素泄鹏，而不能命中孫輩备籽。
- E+F{ }
- 相鄰選擇器
- 選擇緊貼在E元素之后F元素车猬。
- 與兄弟選擇符不同的是珠闰，相鄰選擇符只會命中符合條件的相鄰的兄弟元素伏嗜。
# 此例承绸，如果使用 p+p{color:#f00;} 八酒，那么p2,p5將會變成紅色羞迷； # 如果使用p~p{color:#f00;}衔瓮，那么p2,p3,p4,p5將會變成紅色热鞍； <style> /* 相鄰選擇符(E+F) */ p+p{color:#f00;} /* 兄弟選擇符(E~F) */ p~p{color:#f00;} </style> <p>p1</p> <p>p2</p> <h3>這是一個標(biāo)題</h3> <p>p3</p> <h3>這是一個標(biāo)題</h3> <p>p4</p> <p>p5</p> - E~F{ }
- 兄弟選擇符
- 選擇E元素后面的所有兄弟元素F偷办。
- 與相鄰選擇符不同的是椒涯，兄弟選擇符會命中所有符合條件的兄弟元素废岂，而不強(qiáng)制是緊鄰的元素湖苞。
屬性選擇器
- [att]
選擇具有for屬性的所有元素<style> [for]{margin:10px;} </style> <p> 不帶有 for 屬性的 p 元素</p> <p for="Ethan"> 帶有 for 屬性的 p 元素 </p> <p for="Alice"> 帶有 for 屬性的 p 元素 </p> - E[att]
選擇具有att屬性的E元素财骨。<style> img[alt]{margin:10px;} </style> <img src="圖片url" alt="" /> <img src="圖片url" /> - E[att="val"]
選擇具有for屬性蚓再，并且for=Alice的所有元素<style> [for="Alice"]{margin:10px;} </style> <p> 不帶有 for 屬性的 p 元素</p> <p for="Ethan"> 帶有 for 屬性的 p 元素摘仅，且for的值為 Ethan </p> <p for="Alice"> 帶有 for 屬性的 p 元素娃属，且for的值為 Alice</p> - E[att^="val"]
選擇具有att屬性掏击，且屬性值以字符串val開頭的E元素砚亭。#此例捅膘，將會命中1, 2兩個div寻仗，因?yàn)槠ヅ涞搅薱lass屬性署尤，且屬性值以a開頭 <style> div[class^="a"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div> - E[att$="val"]
選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。#此例混坞，將會命中1, 3兩個div，因?yàn)槠ヅ涞搅薱lass屬性，且屬性值以c結(jié)尾 <style> div[class$="c"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div> - E[att*="val"]
選擇具有att屬性且屬性值為包含字符串val的E元素禾酱。#此例颤陶，將會命中所有div，因?yàn)槠ヅ涞搅薱lass屬性搅方，且屬性值中都包含了b <style> div[class*="b"]{border:2px solid #000;} </style> <div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>
偽類選擇器
- :first-child
向元素的第一個子元素添加樣式 - :last-child
向元素的最后一個子元素添加樣式 - :nth-child(n)
向元素的第 n 個子元素添加樣式
特殊應(yīng)用（可用于表格隔行變色）：- :nth-child(even)
選中偶數(shù)位置的子元素姨涡，添加樣式 - :nth-child(odd)
選中奇數(shù)位置的子元素赏表，添加樣式
- :nth-child(even)
- :nth-last-child(n)
父元素的倒數(shù)第n個子元素E，假設(shè)第n個該子元素不是E跋选，則選擇符無效（E元素必須是某個元素的子元素）-
注意：
<div> <p>第1個p</p> <p>第2個p</p> <span>第1個span</span> <p>第3個p</p> <span>第2個span</span> </div>- 假設(shè)要命中倒數(shù)第一個p(即正數(shù)第3個p)，那么CSS選擇符應(yīng)該是：
p:nth-last-child(2) - 而不是：
p:nth-last-child(1)
解釋：
1. 倒數(shù)第1個p，其實(shí)是倒數(shù)第2個子元素俭尖。
2. 基于選擇符從右到左解析稽犁，首先要找到第1個子元素，然后再去檢查該子元素是否為p虑椎，如果不是p，則n遞增泥技，繼續(xù)查找。- 假設(shè)不確定倒數(shù)第1個子元素是否為E蝶棋，但是又想命中倒數(shù)第1個E玩裙，應(yīng)該這樣寫：
p:last-of-type
- 假設(shè)要命中倒數(shù)第一個p(即正數(shù)第3個p)，那么CSS選擇符應(yīng)該是：
-
- :only-child
匹配父元素僅有一個子元素鸯檬，且該子元素為E。
要使該屬性生效，E元素必須是某個元素的子元素庐冯，E的父元素最高是body栖茉，即E可以是body的子元素吕漂。<style> h1{font-size:16px;} li:only-child{color:#f00;} </style> <h1>只有唯一一個子元素</h1> <ul> <li>結(jié)構(gòu)性偽類選擇符 only-child</li> # 只有 這個字體變色了 </ul> <h1>有多個子元素</h1> <ul> <li>結(jié)構(gòu)性偽類選擇符 only-child</li> <li>結(jié)構(gòu)性偽類選擇符 only-child</li> <li>結(jié)構(gòu)性偽類選擇符 only-child</li> </ul> - :first-of-type
同類型中的第一個同級兄弟元素E - :last-of-type
匹配同類型中的最后一個同級兄弟元素E。
該選擇符總是能命中父元素的倒數(shù)第1個為E的子元素隙袁，不論倒數(shù)第1個子元素是否為E。 - :only-of-type
匹配同類型中的唯一的一個同級兄弟元素E弃榨。
該選擇符總是能命中父元素的唯一同類型子元素E菩收，不論該元素的位置。<style> p:only-of-type{color:#f00;} </style> <div class="test"> <p>結(jié)構(gòu)性偽類選擇符 only-of-type</p> </div> - :nth-of-type(n)
匹配同類型中的第n個同級兄弟元素E鲸睛。 - :nth-last-of-type(n)
匹配同類型中的倒數(shù)第n個同級兄弟元素E娜饵。
該選擇符總是能命中父元素的倒數(shù)第n個為E的子元素，不論倒數(shù)第n個子元素是否為E官辈。 - :empty
匹配沒有任何子元素（包括text節(jié)點(diǎn)箱舞，即文字）的元素E遍坟。 - :not(s)
匹配不含有s選擇符的元素E。<style> p:not(.abc){color:#f00;} </style> <p class="abc">否定偽類選擇符 not(s)</p> #只有class為 .abc的未變色晴股，后面的三個都變色了 <p id="abc">否定偽類選擇符 not(s)</p> <p class="abcd">否定偽類選擇符 not(s)</p> <p>否定偽類選擇符 not(s)</p>
超鏈接的偽類
a:link{}
設(shè)置超鏈接a在未被訪問前的樣式愿伴。a:visited{}
設(shè)置超鏈接a在其鏈接地址已被訪問過的樣式。a:hove{}
設(shè)置元素在其鼠標(biāo)懸停時的樣式电湘。a:active{}
設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時的樣式隔节。-
注意點(diǎn)
如果需要給超鏈接定義：訪問前，鼠標(biāo)懸停寂呛，當(dāng)前被點(diǎn)擊怎诫，已訪問這4種偽類效果，而又沒有按照一致的書寫順序贷痪，不同的瀏覽器可能會有不同的表現(xiàn)幻妓。
超鏈接的4種狀態(tài)，需要有特定的書寫順序才能生效劫拢。
可靠的順序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡和討厭兩個詞來概括#注意肉津，a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后 a:link{} a:visited{} a:hover{} a:active{}
