411      技術社區[雲棲]

精通css(2)-選擇器

雖然這東西很簡單，但是這是最基礎的。能把最基礎的東西運用自如，就已經是高手了。

選擇器的種類可以分為三種：標簽名選擇器、類選擇器和ID選擇器。而所謂的後代選擇器和群組選擇器隻不過是對前三種選擇器的擴展應用。而在標簽內寫入的方式，應該是CSS的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上麵這幾種方式結合在一起，所以就有了5種或6種選擇器了。

1.標簽選擇器

直接用HTML標簽，又叫類型選擇器，元素選擇器，簡單選擇器。

2.類選擇器

之所以把這一條單獨列出來完全是為了排版好看。

3.ID選擇器

其實我不是為了湊字數，真的。

4.擴展用法

好吧，這裏才是重點，融合以上三種選擇器，可以召喚更強大的選擇器：

4.1通用選擇器

用法：*{property：value}

4.2偽類和偽元素

偽類用法：selector : pseudo-class {property: value}

偽元素用法：selector:pseudo-element{property:value}

另外，JQuery還有更強大的選擇器，不過這裏說的是css。

4.3後代選擇器

選擇元素的所有後代:selector1 selector2{...}

對於後代選擇器，瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。比如DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到後，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。這樣做的好處是盡早過濾掉一些無關的樣式規則和元素。

4.4子選擇器

選擇元素的直接後代：selector1 >selector2{...},IE6不支持支持子選擇器。但我們可以模擬子選擇器的效果。比如要實現以下效果：

#nav > li{backgroud:#abc;padding:10px;}

可以先用後代選擇器選擇所有後代：

#nav li{backgroud:#abc;padding:10px;}

然後用通用選擇器覆蓋：

#nav li *{backgroud:none;padding:0;}

4.5相鄰兄弟選擇器

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。

<div>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
</div>

4.6群組選擇器

說它是選擇器，不如說是選擇器的一種用法：selector1，selector2，...{property: value}

4.7屬性選擇器

屬性選擇器根據某個屬性是否存在或屬性的值來尋找元素，非常強大。值得慶幸的是IE6不支持屬性選擇器。

舉個例子吧：

input[type="text"]
{
  margin-bottom:10px;
}

input[type="button"]
{
  width:120px;
}

好了，說了這麼多選擇器大家可能有點暈了，其實大可不必在意這些細節，分類並不重要，會用就行。考慮到這節寫了很多，有關優先級的問題就下節總結吧。

最後更新：2017-04-03 14:54:03

  上一篇： 把vim打造成一個全能IDE

  下一篇： 通過gr-modtool在gnuradio中編寫自己的C++模塊