關於選擇器

CSS常用選擇器分爲如下幾類

1、元素選擇器/類選擇器（選擇某一類元素 如：div p h等標籤）

用法   元素名稱｛屬性:屬性值｝

示例如下,設置div元素的寬高

div｛width:200px;height:100px;｝

2、通配符（就是選擇所有元素，即對整個文檔或文檔中所有元素進行選擇）

用法   *｛屬性:屬性值｝

示例如下，設置整個頁面的背景顏色爲灰色

*｛background：grey｝

說明：通常不建議使用，因爲選擇的元素太多，影響效率

3、id選擇符（給id 添加屬性和id名）

用法：#id名稱｛屬性：屬性值｝

示例如下,給id爲div2的元素設置背景爲pink

<style>
#div2{background:pink;}
</style>
<div id="div2">div2</div>

說明：id選擇器具有唯一性，即一個文檔中只允許有唯一的一個id名稱

4、class選擇符（給一個或多個元素添加class屬性進行歸類）

用法：.class名稱｛屬性：屬性值｝

示例如下，給class名爲caption的元素統一設置字體大小以及顏色

<style>
.caption{color:mediumblue;}
</style>

<h3 class="caption">h3</h3>
<h4 class="caption">h4</h4>

5、羣組選擇符（同時給多個選擇符設置同一個樣式）

用法：div，.hehe,p,#top{屬性：屬性值}

示例如下，對id:div2和p統一設置顏色和字體大小

<style>
#div2,p{color:yellow;font-size:30px;}
</style>

<p>pppp</p>
<div id="div2">div2</div>

6、後代選擇器（最常用的選擇器，用於選擇後代元素 中間用空格隔開）

用法：選擇符1  選擇符2   選擇符n{屬性:屬性值;}

示例如下，對div中的無須列表ul中的內容li設置字體顏色

<style>
    div ul li{color:orange;}
</style>

<div>
    	<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

7、僞類選擇符

a:link {屬性:屬性值;} 初始化狀態

a:visited {屬性:屬性值;} 被點擊後的狀態

a:hover{屬性:屬性值;} 當鼠標滑過時候的狀態

a:active {屬性:屬性值;} 當鼠標按下時候的狀態

說明：僞類選擇器只能給特殊的帶有href屬性的a標籤使用並且只有在特殊的條件下纔會有效果

擴展嘗試 選擇符疊加

8、多個選擇符可以疊加使用 例：一個div有id還有class

div#id.class{屬性:屬性值;}