css文法——選擇器

1. css 選擇器的定義

css 選擇器是用來選擇标簽的，選出來以後給标簽加樣式。

2. css 選擇器的種類

1. 标簽選擇器
2. 類選擇器
3. 層級選擇器(後代選擇器)
4. id選擇器
5. 組選擇器
6. 僞類選擇器

3. 标簽選擇器

根據标簽來選擇标簽，以标簽開頭，此種選擇器影響範圍大，一般用來做一些通用設定。

示例代碼

<style type="text/css">
    p{
        color: red;
    }
</style>

<div>hello</div>
<p>hello</p>      

4. 類選擇器

根據類名來選擇标簽，以 . 開頭, 一個類選擇器可應用于多個标簽上，一個标簽上也可以使用多個類選擇器，多個類選擇器需要使用空格分割，應用靈活，可複用，是css中應用最多的一種選擇器。

示例代碼

<style type="text/css">
    .blue{color:blue}
    .big{font-size:20px}
    .box{width:100px;height:100px;background:gold} 
</style>

<div class="blue">這是一個div</div>
<h3 class="blue big box">這是一個标題</h3>
<p class="blue box">這是一個段落</p>      

5. 層級選擇器(後代選擇器)

根據層級關系選擇後代标簽，以選擇器1 選擇器2開頭，主要應用在标簽嵌套的結構中，減少命名。

示例代碼

<style type="text/css">
    div p{
        color: red;
    }
    .con{width:300px;height:80px;background:green}
    .con span{color:red}
    .con .pink{color:pink}
    .con .gold{color:gold}    
</style>

<div>
    <p>hello</p>
</div>

<div class="con">
    <span>哈哈</span>
    <a href="#" class="pink">百度</a>
    <a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>      

注意點: 這個層級關系不一定是父子關系，也有可能是祖孫關系，隻要有後代關系都适用于這個層級選擇器

6. id選擇器

根據id選擇标簽，以#開頭, 元素的id名稱不能重複，是以id選擇器隻能對應于頁面上一個元素，不能複用，id名一般給程式使用，是以不推薦使用id作為選擇器。

示例代碼

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">這是一個段落标簽</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
<p>這是第二個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名 -->
<p>這是第三個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名  -->      

注意點: 雖然給其它标簽設定id=“box”也可以設定樣式，但是不推薦這樣做，因為id是唯一的，以後js通過id隻能擷取一個唯一的标簽對象。

7. 組選擇器

根據組合的選擇器選擇不同的标簽，以 , 分割開, 如果有公共的樣式設定，可以使用組選擇器。

示例代碼

<style type="text/css">
    .box1,.box2,.box3{width:100px;height:100px}
    .box1{background:red}
    .box2{background:pink}
    .box2{background:gold}
</style>

<div class="box1">這是第一個div</div>
<div class="box2">這是第二個div</div>
<div class="box3">這是第三個div</div>      

8. 僞類選擇器

<style type="text/css">
    .box1{width:100px;height:100px;background:gold;}
    .box1:hover{width:300px;}
</style>

<div class="box1">這是第一個div</div>