CSS常用選擇器權(quán)重優(yōu)先級

CSS常用選擇器

CSS選擇器的作用是從HTML頁面中找出特定的某類元素，而常用的CSS選擇器有如下幾類，我們一起來看看吧！

一. 通配符選擇器

通配符選擇器常用' * '號表示，他是所有選擇器里作用范圍最廣的，能匹配頁面中所有的元素。

基本語法格式： *{屬性：屬性值；}

例子

使用該選擇器定義樣式，清除所有HTML標記的默認邊距。

*{

margin：0;        /* 定義外邊距 */

padding：0;       /* 定義內(nèi)邊距 */

}

但是在實際開發(fā)中不建議使用通配符選擇器，因為它設(shè)置的樣式對所有的HTML標記都生效，不管標記是否需要該樣式，反而降低了代碼的執(zhí)行速度。

二. 標簽選擇器

標簽選擇器是指用HTML標記名稱作為選擇器，按標記名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。

基本語法格式： 標簽名{ 屬性：屬性值；}

所有的HTML標記名都可以作為標簽選擇器，例如：div, a, p, h1,span, 等等。用標簽選擇器定義的樣式對頁面中該類型的所有標簽都有效。

標簽選擇器最大的優(yōu)勢是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是他的缺點，不能設(shè)計差異化樣式。

三. 類選擇器

類選擇器使用‘ . ’(英文點號)進行標識，后面緊跟類名。

基本語法格式： .類名{ 屬性：屬性值；}

該語法中，類名為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。

類選擇器最大的優(yōu)點是可以為元素對象定義單獨或相同的樣式，而且多個標記可以使用同一個類名，可以實現(xiàn)為不同類型的標記指定相同的樣式。同時，一個HTML元素也可以應用多個class類，設(shè)置多個樣式，此時多個類名之間需要用空格隔開，如上述代碼中的兩個

標記。

*注意： 類名的第一個字符不能以數(shù)字開頭，并且嚴格區(qū)分大小寫。

四. id選擇器

id選擇器使用‘ # ’進行標識，后面跟著id名。

基本語法： #id名{ 屬性：屬性值；}

該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應文檔中某一個具體元素。

注意：同一個id不允許應用于多個標記，雖然很多瀏覽器并不會報錯，但JavaScript等腳本語言調(diào)用id時會出錯。另外，id選擇器不支持像類選擇器那樣定義多個值。

五、屬性選擇器

屬性選擇器可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。

語法格式：[標簽名稱]{ 屬性：屬性值；}

注意：只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

六. 并集選擇器

并集選擇器是同時匹配多個選擇器，取多個選擇器的并集，選擇器之間用逗號隔開，如p,div{ }。

語法格式：標簽名1，標簽名2{ 屬性：屬性值；}

我是span標簽

我是一個p標簽

我是第二個p標簽

并集選擇器的優(yōu)點是將多個標簽的相同樣式提取出來，集中聲明，優(yōu)化代碼，方便閱讀。

七. 后代選擇器

后代選擇器也稱包含選擇器，用來選擇特定元素的后代。如.unborn li{ }，表示先匹配第二個選擇器的元素，并屬于第一個選擇器內(nèi)。

語法格式：標簽名稱1 標簽名稱2{屬性：屬性值；}

在CSS中，后代是根據(jù)HTML文檔中的DOM上下文來決定的。當元素發(fā)生嵌套時，內(nèi)層的元素就成為外層元素的后代。如元素B嵌在元素A內(nèi)部，B就是A的后代。而且，B的后代也是A的后代，就像家族關(guān)系。

定義后代選擇器時，外層的元素寫在前面，內(nèi)層的元素寫在后面，中間用空格分隔。后代選擇器會影響到它的各級后代，沒有層級限制。如：

上述選擇器中，div 為祖先元素，span 為后代元素，其作用就是選擇 div 元素的所有后代 span元素，不管 span 元素是 div 元素的子元素、孫輩元素或者更深層次的關(guān)系，都將被選中。換句話說，不論 span是 div 的多少輩的后代，span元素中的文本都會變成紅色。

上述中，假如希望所有錨文本的字體大小是20px，就可以通過后代選擇器ul span來選擇 ul 元素的所有后代，因為后代選擇器會影響到它的各級后代。如：

注意：

1、后代包括兒子，孫子，只要是放在指定標簽的后代都是。

2、也可以不用標簽名稱1、2，也可以用id和class名，分別用id和class來選擇。

3、后代選擇器可以無限衍生。

八. 子代選擇器

子代選擇器使用' > '表示，如ul>li{ }，表示匹配第二個選擇器，且為第一個選擇器的元素的后代。

語法格式：標簽名稱1>標簽名稱2{屬性：屬性值}

CSS 多個選擇器優(yōu)先級，疊加選擇器權(quán)重

一、單選擇器優(yōu)先級

多個單選擇器優(yōu)先級：權(quán)重越大，其優(yōu)先級越高，優(yōu)先生效。!important表示權(quán)重最大，有!important修飾的永遠優(yōu)先生效。

!important>style>ID選擇器>類選擇器>元素選擇>繼承及*

二、疊加選擇器權(quán)重計算

a、復合選擇器會有權(quán)重疊加的問題

b、權(quán)重雖然會疊加,但是永遠不會有進位

1. /* ul li 權(quán)重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */ 
2.  
3. ul li { 
4.  
5. color: green; 
6.  
7. } 
8.  
9. /* li 的權(quán)重是 0,0,0,1    1 */ 
10.  
11. li { 
12.  
13. color: red; 
14.  
15. } 
16.  
17. /* .nav li  權(quán)重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */ 
18.  
19. .nav li { 
20.  
21. color: pink; 
22.  
23. }