css常用選擇器

CSS常用選擇器:標籤選擇器,類選擇器,ID選擇器,派生選擇器,子選擇器,組合選擇器

1:標籤選擇器:如果是一個聲明,則不需要帶分號,如果是多個聲明,則最後一個聲明不需要帶分號

h1{
    color: red
}
h1{
    color: red; font-size: 14px
}

2、類選擇器:在CSS裏用一個點開頭表示類別選擇器定義,所有類的選擇器的名字以一點開始,在句點後面必須以字母開始,類名中允許使用字目,數字,連字號”-“和下劃線”_”,類名分大小寫,類選擇器可以單獨使用,也可以也可以與其他元素結合使用。

.important {color:red;}

*.important {color:red;}

結合其他元素使用

p.important {color:red;}

選擇器現在會匹配class 屬性包含 important 的所有 p 元素,但是其他任何類型的元素都不匹配,不論是否有此 class 屬性。

 

3、id選擇器:id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 "#" 來定義。

 #red {color:red;}  #green {color:green;}

id選擇器只能用一次。 id 選擇器和派生選擇器 

#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。 即使被標註爲 sidebar 的元素只能在文檔中出現一次,這個 id 選擇器作爲派生選擇器也可以被使用很多次: 

#sidebar p{
    font-style: italic; text-align: right; margin-top: 0.5em;
}
#sidebar h2{
    font-size: 1em;font-weight: normal; font-style:italic;   margin: 0;line-height: 1.5;text-align: right;
}

給標籤內的標籤定義樣式。 派生繼承器 

h1  strong{
    color:red;
}

只有當<strong>出現在<h1>標籤裏才改變顏色。 沒有出現在<h1>標籤內的<strong>事件則不會受到影響。

子選擇器:子選擇器(child selector)僅是指它的直接後代

#links>a{
    color:blue;
}

組合選擇器  在對多個元素應用相同的樣式,允許組合多個選擇器,用逗號將它們分開。

 h1,h2,h3,h4  {  
    color:red;
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章