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

CSS常用選擇器

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

一. 通配符選擇器

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

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

例子

使用該選擇器定義樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。

*{

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

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

}

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

二. 標(biāo)簽選擇器

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

基本語法格式： 標(biāo)簽名{ 屬性：屬性值；}

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

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

三. 類選擇器

類選擇器使用‘ . ’(英文點(diǎn)號)進(jìn)行標(biāo)識，后面緊跟類名。

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

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

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

標(biāo)記。

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

四. id選擇器

id選擇器使用‘ # ’進(jìn)行標(biāo)識，后面跟著id名。

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

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

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

五、屬性選擇器

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

語法格式：[標(biāo)簽名稱]{ 屬性：屬性值；}

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

六. 并集選擇器

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

語法格式：標(biāo)簽名1，標(biāo)簽名2{ 屬性：屬性值；}

我是span標(biāo)簽

我是一個(gè)p標(biāo)簽

我是第二個(gè)p標(biāo)簽

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

七. 后代選擇器

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

語法格式：標(biāo)簽名稱1 標(biāo)簽名稱2{屬性：屬性值；}

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

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

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

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

注意：

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

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

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

八. 子代選擇器

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

語法格式：標(biāo)簽名稱1>標(biāo)簽名稱2{屬性：屬性值}

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

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

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

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

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

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

b、權(quán)重雖然會疊加,但是永遠(yuǎn)不會有進(jì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. }