亚洲国产成人av毛,毛片高清无码在线不卡,羞羞视频免费观看

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

作者：佚名點擊：241次評論：0次標簽： CSS

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

類型：視頻播放大�。�46.2M語言：中文評分：7.0
標簽：

立即下載

在我們開始之前，先搞明白幾個概念吧。下面是一段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);
}

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

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

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

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