基礎選擇器

1. 通用選擇器，匹配任何元素：*

    *{

        color:#FF0000;

    }

2.標籤選擇器，匹配指定的所有標籤：

    p{

        color:#FF0000;

    }

3. class選擇器，匹配所有包含指定class的元素

    .hello{

        color:#FF0000;

    }

    p標籤中，class=hello的所有元素，注意，這裡p和.hello之間不能有空格，空格是後代選擇器

    p.hello{

        color:#FF0000;

    }

4. id選擇器，匹配所有包含指定id的元素

    #hello{

        color:#FF0000;

    }

    p標籤中，id=hello的所有元素，這裡p和#hello之間不能有空格，空格是後代選擇器

    p#hello{

        color:#FF0000;

    }

組合選擇器

1. 多元素選擇器，用','逗號隔開元素，不要有空格出現

    p,a{

        color:#FF0000;

    }

2. 後代元素選擇器，用' '空格隔開元素

    div p{

        color:#FF0000;

    }

3. 子元素選擇器，用'>'大於符號隔開元素，不要出現空格

    div>p{

        color:#FF0000;

    }

下面是很重要的優先順序順序

層疊優先順序:

瀏覽器預設< 外部樣式表 < 內部樣式表 < 內聯樣式

{

    瀏覽器預設：不寫style的時候；

    外部樣式表：引用的外部css檔案；

    內部樣式表：在<style>...</style>中寫的樣式；

    內聯樣式：在<p style="..."></p>中寫的樣式；

}

選擇器優先順序：

通用選擇器< 標籤選擇器 < 類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器

{

    派生選擇器又叫做上下文選擇器，比如"div .test #abc{}"

    對於派生選擇器，當有"#"號出現時，不管'#'號在什麼地方，第一個或者中間或者最後一個，

    都視為ID派生選擇器，優先順序高於只有一個選擇的ID選擇器，比如：

        div #abc .hello{} 優先順序高於 #abc{}

    同理，類派生選擇器，當派生選擇器中沒有'#'，而有'.'出現時，叫做類派生選擇器

        div .hello p{}  優先順序高於.hello{}

    那麼，對於同是派生選擇器，優先順序又是怎樣的呢？

    對於ID派生選擇器，ID選擇器個數多的優先順序高於ID選擇器個數少的，比如：

        div #a #b #c{} 優先順序高於 div #a #b .c{}

    當ID選擇器個數相同的時候，根據誰在後用誰，比如：

        div #a #b .c{}

        div #a .b #c{}

        那麼最後起作用的將是div #a .b #c{}

    對於類派生選擇器，是和ID派生選擇器一樣的。

}

綜合起來：

瀏覽器預設，優先順序最低

內聯樣式，優先順序最高

外部樣式表優先順序始終小於內部樣式表

在內部和外部樣式表中，又按照選擇器優先順序區分，元素的效果總是由優先順序最高的選擇器所規定的。

(從上面可以看出，優先順序的順序總是由最詳細的選擇器所決定的，哪個選擇器規定的越清楚，就用誰)