CSS中的選擇器和優(yōu)先級(jí)是什么？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元依蘭做網(wǎng)站,已為上家服務(wù),為依蘭各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

CSS選擇器優(yōu)先級(jí)得關(guān)系為：

!important>內(nèi)聯(lián)>ID選擇器>類選擇器>標(biāo)簽選擇器。

一種優(yōu)先級(jí)算法

1、內(nèi)聯(lián)樣式表的權(quán)值最高 (style="") 權(quán)值為1000

2、統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。（#id） 權(quán)值為100

3、統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。(.class)  權(quán)值為10

4、統(tǒng)計(jì)選擇符中的HTML標(biāo)簽名個(gè)數(shù)。 {例如：p}  權(quán)值為1

按這些規(guī)則將數(shù)字符串逐位相加，就得到最終的權(quán)重，然后在比較取舍時(shí)按照從左到右的順序逐位比較。

1、文內(nèi)的樣式優(yōu)先級(jí)為1,0,0,0，所以始終高于外部定義?！?br/>2、有 !important聲明的規(guī)則高于一切。
3、如果!important聲明沖突，則比較優(yōu)先權(quán)。
4、如果優(yōu)先權(quán)一樣，則按照在源碼中出現(xiàn)的順序決定，后來者居上。
5、由繼承而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其它規(guī)則(比如全局選擇符*定義的規(guī)則)。

瀏覽器中也具有優(yōu)先級(jí)得算法

瀏覽器中得優(yōu)先級(jí)是由A、B、C、D的值來決定的，計(jì)算規(guī)則如下：

• 如果存在內(nèi)聯(lián)樣式，那么A=1,否則A=0；
• B的值為ID選擇器出現(xiàn)的次數(shù)
• C的值為類選擇器和屬性選擇器和偽類出現(xiàn)的總次數(shù)
• D的值為標(biāo)簽選擇器和偽元素出現(xiàn)的總次數(shù)

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h2 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h3 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

比較規(guī)則是: 從左往右依次進(jìn)行比較 ，較大者勝出，如果相等，則繼續(xù)往右移動(dòng)一位進(jìn)行比較 。如果4位全部相等，則后面的會(huì)覆蓋前面的

內(nèi)聯(lián)樣式優(yōu)先級(jí)最高，但是外部樣式也可以覆蓋內(nèi)聯(lián)樣式，只需要 ! important，如果不是為了覆蓋內(nèi)聯(lián)樣式，盡量少使用?。?！

css基本選擇器

1、標(biāo)簽選擇器：匹配所有使用p標(biāo)簽的樣式p{color:red}

2、id選擇器：匹配指定的標(biāo)簽#p2{color:red}

3、class選擇器：誰指定的class誰變色，可選多個(gè),比如.info{color:red}、p.info{color:red}

4、通用選擇器：所有的標(biāo)簽都改變

組合選擇器

	
		
		
		
		
	
	
		
		
你好我是p
		

			

				
我是div2下p1
				

					
div3
				
			
			
我是div2相鄰的元素p
			
h2
			
h3
		
		
		

			hello world
			

				
hello world div2
				
				

				hello hello
			
		
		
h4
	    
最后一個(gè)p
		
	

屬性選擇器

	
		
		
		
	
	
		

			
1111
			
2222
			
3333
			
4444
		
	

偽類

anchor偽類：專用于控制鏈接的顯示效果

    a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。

    a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
    
    a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。
    
    a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）,用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。
    
    偽類選擇器 : 偽類指的是標(biāo)簽的不同狀態(tài):
    
               a ==> 點(diǎn)過狀態(tài) 沒有點(diǎn)過的狀態(tài) 鼠標(biāo)懸浮狀態(tài) 激活狀態(tài)
    
    a:link {color: #FF0000} /* 未訪問的鏈接 */
    
    a:visited {color: #00FF00} /* 已訪問的鏈接 */
    
    a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
    
    a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標(biāo)簽:偽類名稱{ css代碼; }

before after 偽類

:before    p:before       在每個(gè)

元素之前插入內(nèi)容

:after     p:after        在每個(gè)

元素之后插入內(nèi)容

例：p:before{content:"hello";color:red;display: block;}

css的繼承

繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代

body{color:blue;}

給body設(shè)置了顏色，這樣body里面元素都會(huì)繼承該樣式，但是繼承的權(quán)重很低，比普通元素還要低，給任意元素添加個(gè)顏色，都會(huì)把繼承的顏色覆蓋掉。由此可見：任何顯示申明的規(guī)則都可以覆蓋其繼承樣式?！?/p>

CSS繼承也有一些限制，有一些屬性不可被繼承， 如：border、margin、padding、background。等

關(guān)于CSS中的選擇器和優(yōu)先級(jí)是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。