久久久久久精品久久久久,琪琪午夜成人理论福利片,久久线免费观看视频

CSS選擇器的權(quán)重詳解

作者：佚名點(diǎn)擊：241次評(píng)論：0次標(biāo)簽： CSS

優(yōu)酷PC客戶端2017v7.1.5.1183 官方最新版

類型：視頻播放大�。�46.2M語言：中文評(píng)分：7.0
標(biāo)簽：

立即下載

在我們開始之前，先搞明白幾個(gè)概念吧。下面是一段CSS代碼：

a {
border-bottom: 0px;
color: #5DB0E6;
}

a:focus {
outline: 1px dotted #eee;
}

a:active {
outline: 0px;
}

a:hover {
color: #7bc4f4;
}

body#jq-interior {
background-image: url(http://static.jquery.com/files/rocker/images/bg-interior-tile-drk.jpg);
}

上面這個(gè)樣式表是由一個(gè)個(gè)樣式規(guī)則組成，而每一個(gè)樣式規(guī)則又可以分為兩部分：選擇符與聲明。選擇符就相當(dāng)于jQuery的選擇器，能針對(duì)特定元素進(jìn)行設(shè)置。CSS有名叫層疊樣式表，基本上被選中的元素的子元素能繼承它的樣式，但其子元素如果設(shè)置了樣式，也能覆寫它，就像板頁巖這樣累在一起。隨著布局表格這樣落后的布局方式的式微，CSS越來越受到人們的重視。但I(xiàn)E6對(duì)CSS的支持不足與各種層不窮的bug，或者是某些大型網(wǎng)站對(duì)CSS的不合理使用，CSS的體積膨脹起來了。維護(hù)它們可是一件麻煩事，如何讓元素顯示出想要的樣式，我們就必須對(duì)權(quán)重這個(gè)概念有所了解。權(quán)重你可以說是針對(duì)樣式規(guī)則的，也可以說針對(duì)選擇符。之所以這樣說，因?yàn)橛幸粋€(gè)重要的標(biāo)識(shí)符! important可以放到樣式聲明的最后，用來無視本文重點(diǎn)說的權(quán)重等級(jí)。我覺得最好還是不要用這東西，首先IE6對(duì)它支持不好，要支持它需要把一個(gè)樣式規(guī)則分開寫，另，用多了會(huì)嚴(yán)重?cái)_亂CSS的權(quán)重等級(jí)。

有關(guān)CSS權(quán)重等級(jí)的介紹最早見于W3C這篇文章，聽說IE5是最早支持CSS的，不知哪個(gè)早一點(diǎn)呢？很明顯IE是沒有完全照足它來實(shí)現(xiàn)。在《Calculating a selector's specificity》一章，它粗略地用a、b、c、d來對(duì)樣式規(guī)則進(jìn)行評(píng)估，給出每一個(gè)的得分（1 或 0），但沒有給出最終值的計(jì)算方式。

a：如果這個(gè)元素應(yīng)用了行內(nèi)樣式，它才分配此值為1。怎么是行內(nèi)樣式呢？就是標(biāo)簽內(nèi)使用style="...."的方式來設(shè)置樣式，我覺得這是很愚蠢的行為，徒然增加頁面的體積，也非常不好維護(hù)，和使用那些純表示樣式的元素差不多，如big、small、b、u、strike 等等。這樣做法，我個(gè)人覺得，瀏覽器其實(shí)是為它分配了一個(gè)特別的ID（實(shí)質(zhì)上IE也是為頁面上每個(gè)元素分配了一個(gè)uniqueId），然后把它置于樣式表的最下方，于是就沒有其他樣式能覆蓋它了。
b：指一個(gè)樣式規(guī)則的選擇符存在id選擇器。比如上面的body#jq-interior ，不過這樣有點(diǎn)累贅了。我看了許多CSS選擇器的實(shí)現(xiàn)，還有我在做選擇器的經(jīng)驗(yàn)，body完全沒有必要。一個(gè)選擇符就相當(dāng)于一個(gè)選擇器群組，它由各種各樣的選擇器組成。選擇器得到一個(gè)符合CSS選擇符結(jié)構(gòu)的字符串，如果它足夠聰明的話，會(huì)先對(duì)字符串進(jìn)行trim操作，然后進(jìn)行掃描，看有沒有id選擇器，有的話會(huì)砍掉前面的部分，然后再用正則對(duì)其進(jìn)行肢解……換言之，id選擇器具有強(qiáng)烈的排它性，只有并聯(lián)選擇器可以容忍它。
c：指一個(gè)樣式規(guī)則的選擇符是否存在類選擇器與偽類選擇器(:hover，:link，:active，:target)。這些基本上CSS2.1的東西，CSS3增加的基本是結(jié)構(gòu)偽類還有一個(gè)selection偽元素，沒有破壞這個(gè)評(píng)分體系。
d：這個(gè)權(quán)重最低了，指選擇符里存在標(biāo)簽選擇器，與偽元素。何為偽元素呢？前面有::的東西就是偽元素了。注意，早期的偽元素也和偽類一樣，只有一個(gè)冒號(hào)。這可能是后來w3c心血來潮，把它們分離出來（css3規(guī)范），造成今天的樣子。
雖然到目前為止，我們已經(jīng)知道a的權(quán)重肯定大于b，而b大于c，d最小，但這實(shí)在不好計(jì)算，對(duì)于接著下來的示例也不好解說。于是我引進(jìn)外國(guó)另一個(gè)補(bǔ)充方案，它出于這篇名叫《CSS: Specificity Wars》的有才文章。。它把a(bǔ)bcd當(dāng)成算術(shù)上的個(gè)、十、百、千這樣的計(jì)數(shù)單位，各自相乘最后一加，優(yōu)先級(jí)就一目了然啦。我們甚至可以將它們轉(zhuǎn)化為以下一個(gè)直觀的圖示。

好了，我們開始分析一下w3c的示例，看它能給我們什么多余的信息。