国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

不知道層疊,別說你懂CSS

izhuhaodev / 1833人閱讀

摘要:知道存在是很有用的,這樣當(dāng)你在別人的代碼中遇到它時,你就知道它是什么了。如上面所示的示例所示,元素選擇器具有很低的特殊性。類選擇器具有更高特殊性,所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。

在實際的工作中,我們可能還有些疑惑,當(dāng)有多個選擇器作用在一個元素上時,哪個規(guī)則最終會應(yīng)用到元素上?其實這是通過層疊機制來控制的,這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。

層疊

CSS 是 Cascading Style Sheets 的縮寫,這暗示 層疊(cascade) 的概念是很重要的。在最基本的層面上,它表明CSS規(guī)則的順序很重要,但它比那更復(fù)雜。什么選擇器在層疊中勝出取決于三個因素(這些都是按重量級順序排列的——前面的的一種會否決后一種):

重要性(Importance)

特殊性(Specificity)

源代碼次序(Source order)

重要性 !important

在CSS中,有一個特別的語法可以讓一條規(guī)則總是優(yōu)先于其他規(guī)則:!important。把它加在屬性值的后面可以使這條聲明有無比強大的力量。

注意: 重載這個 !important 聲明的唯一方法是在后面的源碼或者是一個擁有更高特殊性的源碼中包含相同的 !important 特性的聲明。

知道 !important存在是很有用的,這樣當(dāng)你在別人的代碼中遇到它時,你就知道它是什么了。但是!我們建議你千萬不要使用它,除非你絕對必須使用它。您可能不得不使用它的一種情況是,當(dāng)您在CMS中工作時,您不能編輯核心的CSS模塊,并且您確實想要重寫一種不能以其他方式覆蓋的樣式。 但是,如果你能避免的話,不要使用它。由于 !important 改變了層疊正常工作的方式,因此調(diào)試CSS問題,尤其是在大型樣式表中,會變得非常困難。

樣式表來源

要注意一個CSS聲明的重要性取決于它被指定在什么樣式表內(nèi)——用戶可以設(shè)置自定義樣式表覆蓋開發(fā)商的樣式,例如用戶可能有視力障礙,想設(shè)置字體大小對所有網(wǎng)頁的訪問是雙倍的正常大小,以便更容易閱讀。

相互沖突的聲明將按以下順序適用,后一種將覆蓋先前的聲明

在用戶代理樣式表的聲明 (例如:瀏覽器在沒有其他聲明的默認樣式).

用戶樣式表中的普通聲明(由用戶設(shè)置的自定義樣式)。

作者樣式表中的普通聲明(這是我們設(shè)置的樣式,Web開發(fā)人員)。

作者樣式表中的重要聲明

用戶樣式表中的重要聲明(優(yōu)先級最高)

Web開發(fā)者的樣式表覆蓋用戶的樣式表是合理的,所以設(shè)計可以保持預(yù)期,但是有時候用戶有很好的理由來重寫web開發(fā)人員樣式,如上所述,這可以通過在用戶的規(guī)則中使用 !important

特殊性

特殊性基本上是衡量選擇器的具體程度的一種方法——它能匹配多少元素。如上面所示的示例所示,元素選擇器具有很低的特殊性。類選擇器具有更高特殊性,所以將戰(zhàn)勝元素選擇器。ID選擇器有甚至更高的專用性, 所以將戰(zhàn)勝類選擇器。

一個選擇器具有的專用性的量是用四種不同的值(或組件)來衡量的,它們可以被認為是千位,百位,十位和個位——在四個列中的四個簡單數(shù)字:

千位:如果聲明是在 style 屬性中該列加1分(這樣的聲明沒有選擇器,所以它們的專用性總是1000。)否則為0。

百位:在整個選擇器中每包含一個 ID選擇器就 在該列中加1分。

十位:在整個選擇器中每包含一個 類選擇器屬性選擇器、或者 偽類 就在該列中加1分。

個位:在整個選擇器中每包含一個 元素選擇器偽元素 就在該列中加1分。

注意: 通用選擇器 (*), 復(fù)合選擇器 (+, >, ~, " ") 和否定偽類 (:not) 在專用性中無影響。

示例

選擇器 千位 百位 十位 個位 合計值
h1 0 0 0 1 0001
#important 0 1 0 0 0100
h1 + p::first-letter 0 0 0 3 0003
li > a[href*="zh-CN"] > .inline-warning 0 0 2 2 0022
#important div > div > a:hover, 在一個元素的