css樣式有哪幾種選擇器

CSS選擇器、優(yōu)先級(jí)與匹配原理

成都創(chuàng)新互聯(lián)是一家專業(yè)提供羅定企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為羅定眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標(biāo)簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul li）6.后代選擇器（li a）7.通配符選擇器（*）8.屬性選擇器（a[rel="external"]）9.偽類選擇器（a:hover,li:nth-child）

其中ID選擇器的效率是最高，而偽類選擇器的效率則是最低

CSS的權(quán)重

1. 通配選擇符的權(quán)值 0,0,0,0

2. 標(biāo)簽的權(quán)值為 0,0,0,1

3. 類的權(quán)值為 0,0,1,0

4. 屬性選擇的權(quán)值為 0,0,1,0

5. 偽類選擇的權(quán)值為 0,0,1,0

6. 偽對(duì)象選擇的權(quán)值為 0,0,0,1

7. ID的權(quán)值為 0,1,0,0

8. important的權(quán)值為最高 1,0,0,0

使用規(guī)則： 選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先 。

從上面我們可以得出兩個(gè)關(guān)鍵的因素：

1. 權(quán)值的大小跟選擇器的類型和數(shù)量有關(guān)

2. 樣式的優(yōu)先級(jí)跟樣式的定義順序有關(guān)

css定義的權(quán)重 面試時(shí)怎么回答

CSS選擇器的權(quán)重與優(yōu)先規(guī)則

我們?cè)谑褂肅SS對(duì)網(wǎng)頁元素定義樣式時(shí)經(jīng)常會(huì)遇到這種情況：要對(duì)一般元素應(yīng)用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們?cè)趺礃觼肀ＷC我們所新定義的元素樣式能覆蓋目標(biāo)元素上原有的樣式呢？

在CSS中，會(huì)根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個(gè)規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。

那么，又怎么來計(jì)算選擇器的特殊性呢？下面這張圖介紹了特殊性的計(jì)算方法：

我們把特殊性分為4個(gè)等級(jí)，每個(gè)等級(jí)代表一類選擇器，每個(gè)等級(jí)的值為其所代表的選擇器的個(gè)數(shù)乘以這一等級(jí)的權(quán)值，最后把所有等級(jí)的值相加得出選擇器的特殊值。

4個(gè)等級(jí)的定義如下：

第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

第二等：代表ID選擇器，如：#content，權(quán)值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為10。

第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為1。

例如上圖為例，其中#NAV為二等選擇器，.ACTIVE為三等選擇器，UL、LI和A為四等選擇器。則整個(gè)選擇器表達(dá)式的特殊性的值為1*100+1*10+3*1=113

下面是一些計(jì)算示例：

注意：通用選擇器（*），子選擇器（）和相鄰?fù)x擇器（+）并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為0。

理解選擇器的特殊性很重要，特別是在修復(fù)bug的時(shí)候，因?yàn)槟阈枰私饽男┮?guī)則優(yōu)先及其原因。

如果你遇到了似乎沒有起作用的CSS規(guī)則，很可能是出現(xiàn)了特殊性沖突。請(qǐng)?jiān)谀愕倪x擇器中添加他的一個(gè)父元素的ID，從而提高它的特殊性。如果這能解決問題，就說明樣式表中其他地方很可能有更特殊的規(guī)則，它覆蓋了你的規(guī)則。如果是這種情況，你可能需要檢查代碼，解決特殊性沖突，讓代碼盡可能簡潔。

css規(guī)則按選擇器類型分為哪四種？

1、代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。

2、代表ID選擇器，如：#content，權(quán)值為100。

3、代表類，偽類和屬性選擇器，如.content，權(quán)值為10。

4、代表類型(元素)選擇器和偽元素選擇器，如div p，權(quán)值為1。

按照CSS代碼的執(zhí)行先后順序。如果有重復(fù)的規(guī)則，按照后執(zhí)行的定義。最終規(guī)則是多個(gè)定義規(guī)則的綜合。重點(diǎn)：高級(jí)規(guī)則定義對(duì)于不同表格的文字樣式定義。(不同表格使用不同ID、使用類樣式定義)一頁中的多種超級(jí)鏈接樣式定義。多個(gè)相同規(guī)則不同對(duì)象的CSS共同定義。對(duì)于同一對(duì)象定義的多種CSS方式考慮哪種更科學(xué)。

css類是權(quán)值靠前還是就近原則靠前

正常情況下是就近原則，css從上直下，如果相同會(huì)采用最后的css，如果是css3就要看情況了。

比如：如果設(shè)置了【：first-child或者：last-child，：nth-child()】等這種選擇器，會(huì)采用選擇器的css；如果設(shè)置了【！important】會(huì)采用有這個(gè)的css，就算是寫在div里面的也沒有這個(gè)級(jí)別高（但不是萬能的，有的可以設(shè)置有的不行，列出來太多了，記著也麻煩，最簡單的記憶方式就是寫完在瀏覽器中F12，如果劃橫線就是不好使）

width：10px ！important；意思是設(shè)置成最高級(jí)別，不管先后都會(huì)采用這個(gè)css，如果有兩個(gè)這種代碼會(huì)采用最后一個(gè)。

以下是優(yōu)先級(jí)設(shè)置順序：

1、width：10px；

2、width：10px ！important；

3、：first-child{width：10px；}

4、：first-child{width：10px ！important；}

優(yōu)先級(jí)順序?yàn)?231，如果是同級(jí)別情況下會(huì)就近選擇，就是選擇最后一個(gè)

CSS權(quán)值是怎樣的?怎樣打破這樣規(guī)律?

1. 內(nèi)聯(lián)樣式表的權(quán)值最高 1000

2. ID 選擇器的權(quán)值為 100

3. Class 類選擇器的權(quán)值為 10

4. HTML 標(biāo)簽選擇器的權(quán)值為 1

CSS 優(yōu)先級(jí)法則：

A 選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先

B 當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置

C 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式

D 繼承的CSS 樣式不如后來指定的CSS 樣式

E 在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級(jí)最大

這是規(guī)定好的,自然不能打破

分享題目：css樣式權(quán)值,css中樣式
鏈接分享：http://www.rwnh.cn/article6/dscohog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、Google、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、商城網(wǎng)站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)