CSS樣式 層疊（三）

前端介面開發的時候，經常會引入很多樣式，而且還有把樣式寫在js裡面控制的（如：使能按鈕）或內嵌到元素的或有的在規則後面加!important，隨著版本的迭代，各種樣式被覆蓋，樣式的調整真的慘目忍睹。

css是cascading style sheets 的縮寫，這表示在css中層疊的概念很重要，也就是css規則的順序很重要，影響規則的三個因素如下：

重要性和源**次序就不多說，關鍵是專用性，mdn解釋：乙個選擇器具有的專用性的量是用四種不同的值（或元件）來衡量的，它們可以被認為是千位，百位，十位和個位——在四個列中的四個簡單數字：

1.千位：如果宣告是在style 屬性中該列加1分（這樣的宣告沒有選擇器，所以它們的專用性總是1000。）否則為0。

2.百位：在整個選擇器中每包含乙個id選擇器就在該列中加1分。

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

4.個位：在整個選擇器中每包含乙個元素選擇器或偽元素就在該列中加1分。

選擇器千位

百位十位

個位合計值h10

0010001

#indentifier01

000100

h1 + p::first-letter00

030003

li > a[href*=」zh-cn」] > .inline-warning00

220022(十位：乙個類選擇器（.inline-warning）和乙個屬性選擇器（[href*=」zh-cn」]），個位：兩個元素選擇器（p、a）)

沒有選擇器，規則在乙個元素的 <\style>屬性裡10

001000

css為處理繼承提供了四種特殊的通用屬性值：

2.initial ：該值將應用到選定元素的屬性值設定為與瀏覽器預設樣式表中該元素設定的值一樣。如果瀏覽器預設樣式表中沒有設定值，並且該屬性是自然繼承的，那麼該屬性值就被設定為 inherit。

3.unset ：該值將屬性重置為其自然值，即如果屬性是自然繼承的，那麼它就表現得像 inherit，否則就是表現得像 initial。

4.revert ：如果當前的節點沒有應用任何樣式，則將該屬性恢復到它所擁有的值。換句話說，屬性值被設定成自定義樣式所定義的屬性（如果被設定）， 否則屬性值被設定成使用者**的預設樣式。

**備註：**css的all屬性和重置所有繼承屬性，且並不是所有屬性都可以繼承，如：margin、padding、border、background-image等繼承是沒有意義的，而像font-family、color繼承是有意義的。

css層疊樣式

css 四大核心 一 選擇器 二 盒子模型 實現網頁布局 三 浮動四 四 定位 了解css 概念 層疊樣式表 級聯樣式表 cascading style s heet 作用 美化網頁 通過css的方式給html標籤設定樣式 css語法 選擇器 類選擇器 語法 1.定義型別.自定義型別名 2.呼叫型別...

css層疊樣式

層疊樣式表 層疊 相同的樣式的不同值作用到同一元素的時候,會有樣式被覆蓋.樣式生效會有先後重要的順序.根據樣式優先順序,如果優先順序一樣,後寫會覆蓋先寫的.樣式表 元素視覺表現的集合.例如我們看到的寬高背景顏色等等 樣式是依附html而存在的,如果沒有標籤,樣式將毫無意義.最小影響法則 當我們建立乙...

css層疊樣式

用來調節標籤的樣式 注釋 標籤選擇器 元素選擇器 divid選擇器 d1類選擇器 c1樣式類名不要用數字開頭 通用選擇器 後代選擇器 標籤 空格 標籤 div span樣式只改變後代標籤，並不改變父類本身 兒子選擇器 只影響兒子，其他後代不影響 div span毗鄰選擇器，只影響div 後邊同一級別...