網(wǎng)站CSS通用選擇符、子選擇符和相鄰選擇符
作者：佚名 時(shí)間：2014-03-10 分享到：
通用選擇符、子選擇符和相鄰選擇符
前面提到了上下文選擇符，這里說(shuō)下網(wǎng)站CSS除逗號(hào)和空格之外，還定義了其他選擇符模式，下列示例對(duì)此進(jìn)行了說(shuō)明：
*{color: purple; font: zapfDingbats}
ol > li {font-size: 20%;font-style: italic;}
h1 + h2 {margin-top: +4mm}
在第一個(gè)示例中，通用*選擇符會(huì)將樣式應(yīng)用到文檔的所有元素中，這樣所有文本都會(huì)用ZapfDingBat字符顯示。第二個(gè)示例選擇了一種特殊的子/父關(guān)系，在這個(gè)示例中，條目都處于一個(gè)有序列表中。第三個(gè)示例則解釋了相鄰選擇符類(lèi)型，這種類(lèi)型用來(lái)在文檔中為兩個(gè)相鄰的內(nèi)容選擇標(biāo)簽。在這個(gè)示例里，特殊的選擇符在文檔的一個(gè)一級(jí)標(biāo)題和緊接著的二級(jí)級(jí)標(biāo)題之間加入了垂直空白。
屬性選擇符
還存在一種可能，就是僅把樣式與那些具有特殊屬性的HTMl/XHTML元素相連接。具體做法是，在元素名稱(chēng)之后樣式定義之前，將扔需的屬性列在方括號(hào)中：
div[align]{font-style: italic;}
div[align=left]{font-style: italic;}
div[title="bibliography"]{font-size: smaller}
div[lang="en"]{color: green}
第一個(gè)示例最簡(jiǎn)單：它僅用斜體顯示那些包含align屬性的<div>標(biāo)簽隨后的內(nèi)容，不管為該屬性分配的何值。第二個(gè)示例則有一點(diǎn)挑剔，它僅與些align屬性設(shè)置為left的<div>標(biāo)簽相匹配。
第三個(gè)示例匹配任何title屬性包含單詞"bibliography"的<div>標(biāo)簽，并特意用一個(gè)或者多個(gè)空格將該單詞劃分出來(lái)。部分字匹配沒(méi)有計(jì)算在內(nèi)；如果你曾經(jīng)用過(guò)div[title~="a"],那么所匹配的<div>標(biāo)簽的title屬性就要包含一個(gè)用空格隔開(kāi)的單獨(dú)的"a"(在標(biāo)題的開(kāi)始處或者結(jié)尾處)。
最后一個(gè)示例幾乎是專(zhuān)門(mén)用來(lái)匹配在lang屬性中指定的語(yǔ)言組。它匹配的<div>標(biāo)簽中l(wèi)ang屬性必須設(shè)置為用連字符分隔的詞語(yǔ)表，并且都要以"en"開(kāi)頭。該標(biāo)例匹配的屬性有l(wèi)ang=en、lang=en-us、lang=en-uk,諸如此類(lèi)。
我們可以將通用選擇符與屬性選擇符結(jié)合起來(lái)，這樣就可以匹配特定屬性的所有元素。例如：
*[class=comment]{display: none}
上述代碼將隱藏文檔中class屬性為comment的所有元素。
如沒(méi)特殊注明，文章均為上海聯(lián)楷網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.ktcbnqb.cn/contact/20151229/n7326.html
