|
28. X:only-child
div p:only-child {
color: red;
}
這個偽類用的比較少。在上面例子中匹配的是div下有且僅有一個的p，也就是說，如果div內(nèi)有多個p，將不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代碼中第一個div中的段落p將會被匹配，而第二個div中的p則不會。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
這個偽類匹配的是，在它上級容器下只有它一個子元素，它沒有鄰居元素。例如上面代碼匹配僅有一個列表項的列表元素。
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type偽類與:nth-of-type(1)效果相同，匹配出現(xiàn)的第一個元素。我們來看個例子：
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>
<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
在上面的html代碼中，如果我們希望僅匹配List Item 2列表項該如何做呢：
方案一：
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
方案二：
p + ul li:last-child {
font-weight: bold;
}
方案三：
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera。
總結(jié)：
如果你正在使用老版本的瀏覽器，如IE 6，在使用上面css選擇器時一定要注意它是否兼容。不過，這不應成為阻止我們學習使用它的理由。在設計時，你可以參考瀏覽器兼容性列表，也可以通過腳本手段讓老版本的瀏覽器也支持它們。
另一點，我們在使用javascript類庫的選擇器時，例如jquery，要盡可能的使用這些原生的css3選擇器，因為類庫的選擇器引擎會通過瀏覽器內(nèi)置解析它們，這樣會獲得更快的速度。
原文：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
本文鏈接：http://www.95time.cn/tech/web/2011/8485.asp 
出處：css9.net
責任編輯：bluehearts
上一頁 30個最常用css選擇器解析 [6] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 7 頁 30個最常用css選擇器解析 [7]
