CSS基礎（三）：選擇器

經常使用選擇器

元素選擇器，即html標記如div,ul,li,p,h1~h6,table等。

p { font-size:14px; }
h1 { color:#F00; }

 

複合選擇器， 由兩個選擇器直接構成，第一個必須是元素選擇器，第二個必須是類選擇器和ID選擇器，這兩個選擇器之間不能有空格。

p.special { color:#red}
.special { color:#green; }

 

後代選擇器，用來尋找特定元素或元素組的後代，後代選擇器由其餘兩個選擇器之間的空格表示。在這裏只有h2標記裏面的字體顯示爲紅色，而且有10px的內邊距。

<div>測試1
<h2>測試1</h2>
</div>

div h2{color:#F00;padding:10px;}

 

id選擇器，標有特定 id 的 HTML 元素指定特定的樣式，用#來表示。id 屬性只能在每一個 HTML 文檔中出現一次。

<div id="main"></div>

#main {font-size:18px;}

 

類選擇器，標有class的 HTML 元素指定特定的樣式，用.來表示。類名的第一個字符不能使用數字。

<div class="main"></div>

.main {font-size:18px;}

 

僞類，表示表單元素或連接的狀態。

如a:link,a:hover,a:visited,a:active，分別爲用於連接還沒有被用戶訪問的狀態，用於用戶移動他們的鼠標在元素上，而還沒有觸發或點擊它的時候，用於用戶訪問過的連接，用於用戶點擊元素的狀況。

 

通用選擇器

像通配符的做用，能夠匹配全部元素，由*表示，對頁面上全部的元素應用樣式。例如刪除每一個元素上默認的瀏覽器內邊距和外邊距。可是使用*這種方式加載很慢，不建議使用。

* {margin:0; padding:0;}

 

高級選擇器

子選擇器，選擇元素的直接後代。這個與後代選擇器不同，後者指選擇一個元素的全部後代。

<ul id="nav">
<li>1</li>
<li>1</li>
<li>
    <ul>
        <li>2</li>
        <li>2</li>
    </ul>
</li>
</ul>

#nav>li {padding-left:20px;}

在這個例子中，只有外層列表的li會有20px的左邊距，內層嵌套的不會有影響。

 

相鄰同胞選擇器，定位同一個父元素下某個元素以後的元素。

h2 + p {font-size:18px;}

 

屬性選擇器，根據某個元素的屬性是否存在或屬性值來尋找元素。

a[title=」test」] {color:#F00;}

 

CSS的優先級

 如何計算指定選擇器的優先級？若是你考慮到將優先級表示爲用逗號隔開的四個數字就會至關簡單，好比：1, 1, 1, 1 或0, 2, 0, 1

1. 第一個數字(a)一般就是0，除非在標籤上使用style屬性；
2. 第二個數字(b)是該選擇器上的id的數量的總和；
3. 第三個數字(c)是用在該選擇器上的其它屬性選擇器和僞類的總和。這裏包括class (.example) 和屬性選擇器(好比 li[id=red])；
4. 第四個數字(d)計算元素(就像table、p、div等等)和僞元素(就像:first-line等)；
5. 通用選擇器(*)是0優先級；
6. 若是兩個選擇器有一樣的優先級，在樣式表中後面的那個起做用。

讓咱們看幾個例子，這樣或許比較容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一個將會起做用，由於它比第二個優先級高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

 

文章參考

http://www.qianduan.net/taming-advanced-css-selectors.html

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

 

 

做者： ForEvErNoME
出處： http://www.cnblogs.com/ForEvErNoME/
歡迎轉載或分享，但請務必聲明文章出處。若是文章對您有幫助，但願你能 推薦 或 關注