|
6. CSS 3 結(jié)構(gòu)偽類
:nth-child
:nth-child()偽類允許你定位某個父級元素的一個或多個特定的子元素.
你可以通過定義它的值為一個整數(shù)來定位某個單個子元素：
ul li:nth-child(3) {
color: red;
}
這將會讓ul元素的第三個li元素的文字變成紅色。注意如果在ul里面有個其它類型的元素(不是li)，它也會算作其子元素。
你可以使用表達(dá)式來定位子元素。比如，下面的表達(dá)式將從第四個開始匹配每第三個元素。
ul li:nth-child(3n+4) {
color: yellow;
}
在上面的這個例子中，第一個黃色的li元素將會是第四個。如果也想從第一個開始匹配，你可以使用一個簡單的表達(dá)式：
ul li:nth-child(3n) {
color: yellow;
}
這樣的話，第一個黃色的li元素將會是第三個子元素，然后是它后面的每隔第三個�，F(xiàn)在想象一下如果你只想匹配列表中的前四個子元素：
ul li:nth-child(-n+4) {
color: green;
}
:nth-child的值同樣也可以被定義為“even” 或“odd”，和“2n” (第偶數(shù)個) 或“2n+1” (第奇數(shù)個)的效果是一樣的。
:nth-last-child
:nth-last-child偽類基本上和:nth-child偽類的作用相同，但是它從最后一個元素開始算。
使用上面的一個例子來看看：
ul li:nth-child(-n+4) {
color: green;
}
不是匹配最前面的四個li元素，該選擇器匹配最后面的四個元素。
你同樣可以使用“even” 或“odd”只，同樣與nth-child不同的是，這是從最后面的元素開始算的：
ul li:nth-last-child(odd) {
color: grey;
}
:nth-of-type
:nth-of-type偽類和:nth-child也很像，不同的是它只計算選擇器中指定的那個元素。
這對定位元素中包含大量不同的元素的情況會很有用。比如，我們想控制一個文本塊中的每隔一個段落，但是我們又想要無視其它元素比如圖片和引用塊：
p:nth-of-type(even) {
color: blue;
}
你也可以使用一些值，就像在:nth-child中使用的一樣。
:nth-last-of-type
你能猜到它吧？！:nth-last-of-type 偽類可以像前面提到的:nth-last-child一樣使用，但是這次，它將之匹配你在選擇器中指定的元素類型：
ul li:nth-last-of-type(-n+4) {
color: green;
}
我們可以更加的聰明一些，在一個大的塊級選擇器中結(jié)合多種這樣的偽類。比如我們想讓文章中的所有的圖片左浮動，除了第一個和最后一個(我們可以假設(shè)他們是滿寬的，無須浮動)：
.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
float: left;
}
所以在這個選擇器的第一部分，我們從第二個圖片開始定位每一個圖片。在第二部分中，我們定位所有的圖片，除了最后一個。因為這兩個選擇器并非互斥的，我們可以同時使用它們，這樣就可以一下子排除第一個和最后一個元素！
:last-child
:last-child偽類的作用類似于:first-child 偽類，但是會定位父級元素的最后一個子元素。
讓我們假設(shè)你不想讓你的日志的div的最后一個段落也有一個底部邊距：
.post > p:last-child {
margin-bottom: 0;
}
該選擇器將定位class為”post”的元素的最后一個直接子級段落。
:first-of-type 和:last-of-type
:first-of-type 偽類用于定位一個父級元素下的第一個同類子元素。
比如，你可以定位某個特定的div的第一個子級段落(p)，并讓其第一行字母大寫:
.post > p:first-of-type:first-line {
font-variant: small-caps;
}
在這個選擇器中，你可以確定你是在只定位class為”post”的元素的直接子級p元素，而且還是匹配第一個子級p元素。
:last-of-type偽類與此類似，只是匹配最后一個子元素。
:only-child
:only-child偽類表示一個元素是它的父級元素的唯一一個子元素。
比如說，你有一些盒子(“news”)，里面有一些文字段落，當(dāng)你有多于一個段落的時候，你想讓文字比只有一個段落的時候小一些：
div.news > p {
font-size: 1.2em;
}
div.news > p:only-child {
font-size: 1.5em;
}
第一個選擇器中，我們定義”news”div的所有子級p元素的字體大小。在第二個中，我們覆蓋之前的字體大小，如果該p元素是“news” div的唯一子元素的時候，它的字體大小會比較大一些。
:only-of-type
:only-of-type偽類表示一個元素是它的父級元素的唯一一個相同類型的子元素。
這有用什么用？假設(shè)你有一些日志，每一篇都有個class為”post”的div，他們中的一些有多于一張圖片，但是有些可能就只有一張圖片。你想讓后者中的圖片水平居中，而在其它的有多于一張圖片的日志中，就將它左浮動。這個需求用這個選擇器就很容易實現(xiàn)：
.post > img {
float: left;
}
.post > img:only-of-type {
float: none;
margin: auto;
}
:empty
:empty偽類表示一個元素里面沒有任何內(nèi)容。
這個選擇器可以用很多種用途。比如，你在你的“sidebar”中有若干個盒子，但是不想讓空盒子顯示出來：
#sidebar .box:empty {
display: none;
}
注意，就算”box”div里面只有一個空格，它也不會被css當(dāng)作空標(biāo)簽的，這樣就不能匹配該選擇器了。
瀏覽器支持
Internet Explorer (直到8.0版本)都不支持結(jié)構(gòu)偽類。Firefox、Safari 和Opera 在其最新版本的瀏覽器中指出這些選擇器。這意味著，使用這些選擇器對網(wǎng)站的可用性和可訪問性是很有用的，或者如果網(wǎng)站的用戶中的大部分是使用IE而且你不想在某些細(xì)節(jié)上無視他們，最好還是保持使用通用的class和簡單的選擇器來迎合這些選擇器。否則你會被搞瘋的！
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 征服高級CSS選擇器 [5] 下一頁 征服高級CSS選擇器 [7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 6 頁 征服高級CSS選擇器 [6]
