CSS（六）

CSS權重

CSS權重指的是樣式的優先順序，有兩條或多條樣式作用於一個元素，權重高的那條樣式對元素起作用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值後，權重值為 10000
2、內聯樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0

權重的計算實例

1、實例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">這是一個div元素</div>
<!-- 
兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下麵的行間樣式的權重值為1000，
所以文字的最終顏色為red 
-->

2、實例二：

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>這是一個h2標題</h2>
    </div>
</div>
<!-- 
第一條樣式的權重計算： 100+1+10+1，結果為112；
第二條樣式的權重計算： 100+10+1，結果為111；
h2標題的最終顏色為red
-->

CSS3新增選擇器

1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2個子元素div匹配 -->

2、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數第n個子元素（與上一項順序相反）
3、E:first-child：匹配元素類型為E且是父元素的第一個子元素
4、E:last-child：匹配元素類型為E且是父元素的最後一個子元素
5、E:only-child：匹配元素類型為E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n個類型為E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型為E的子元素（與上一項順序相反）
8、E:first-of-type：匹配父元素的第一個類型為E的子元素
9、E:last-of-type：匹配父元素的最後一個類型為E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 選擇一個空的元素
12、E:enabled 可用的表單控制項
13、E:disabled 失效的表單控制項
14、E:checked 選中的checkbox
15、E:not(s) 不包含某元素

<style type="text/css">            
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

16、E:target 對應錨點的樣式

<style type="text/css">
    h2:target{
        color:red;
    }
</style>
......
<a href="#tit01">標題一</a>
......
<h2 id="tit01">標題一</h2>

<!-- 點擊鏈接，h2標題變紅 -->

17、E > F E元素下麵第一層子集
18、E ~ F E元素後面的兄弟元素
19、E + F 緊挨著的兄弟元素

屬性選擇器：
1、E[data-attr] 含有data-attr屬性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">這是一個div元素</div>

<!-- 點擊鏈接，h2標題變紅 -->

2、E[data-attr='ok'] 含有data-attr屬性的元素且它的值為“ok”
3、E[data-attr^='ok'] 含有data-attr屬性的元素且它的值的開頭含有“ok”
4、E[data-attr$='ok'] 含有data-attr屬性的元素且它的值的結尾含有“ok”
5、E[data-attr*='ok'] 含有data-attr屬性的元素且它的值中含有“ok”