之前一直總結的是CSS2的一些知識點，今天差不多總結完了JavaScript就回來補充一下CSS3的一些東西吧

CSS權重

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

權重的等級

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

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

權重的計算例項

例項一

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

例項二

<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:first-child：匹配元素型別為E且是父元素的第一個子元素

3、E:last-child：匹配元素型別為E且是父元素的最後一個子元素 4、E > F E元素下面第一層子集 5、E ~ F E元素後面的兄弟元素 6、E + F 緊挨著的後面的兄弟元素

屬性選擇器

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

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

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

圓角

設定某一個角的圓角，比如設定左上角的圓角： border-top-left-radius:30px 60px; 同時分別設定四個角： border-radius:30px 60px 120px 150px; 設定四個圓角相同： border-radius:50%;

rgba（新的顏色值表示法）

1、盒子透明度表示法：

  .box
    {
        opacity:0.1;
        /* 相容IE */
        filter:alpha(opacity=10); 
    }

2、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度