CSS層疊樣式表的層疊是什麼意思（轉自知乎）

時間 2019-11-06

標籤 css 層疊樣式什麼意思自知欄目 CSS 简体版

原文原文鏈接

轉自知乎上的回答：http://www.zhihu.com/question/20077745html

解答一：瀏覽器

層疊指的是樣式的優先級，當產生衝突時以優先級高的爲準。
1. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記）
2. id選擇符>（僞）類選擇符>元素選擇符
3. 權重相同時取後面定義的樣式

如下是一段經典的html，三個類名分別爲模塊、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面均可以由這種結構嵌套或者累加而成。字體

解答二：spa

CSS層疊是指CSS樣式在針對同一元素配置同一屬性時，依據層疊規則（權重）來處理衝突，選擇應用權重高的CSS選擇器所指定的屬性，通常也被描述爲權重高的覆蓋權重低的，所以也稱做層疊。每一個CSS選擇器都會有一個權重（行內1000，id100，class10，tag一、能夠這樣認爲），當兩個選擇器同時配置同一元素的同一屬性時（好比一個設置color：red，另外一個color：black），就會產生衝突，而解決衝突的方案就是CSS選擇器的權重，權重高的來覆蓋權重低的。
另外，繼承的屬性是權重重最輕的，會被上面的四個定義方式覆蓋。

CSS語義化其實更多地是指HTML的語義化。好比下面的一個代碼咱們這樣寫：
<div class="box">
<div class="h2">這是區塊標題</div>
<div class="bd">這是區塊內容</div>
<div>
可是語義化的寫法更能使得 robot識別網頁的結構，下面是語義化的寫法：
<section>
<h2>這是區塊標題</h2>
<p>這是區塊內容</p>
</section>
對於robot來講，它可以識別section（區塊）、h2(二級標題)、p(文字段落)，可是不能識別出div所包含的內容，由於div這個標記自己是無語義的（必要時經過class或id屬性來賦予語義，可是這是次優選擇）。而HTML5新增的article、header、footer、nav、section等標籤就是豐富了HTML原生的語義標籤，在很大程度上知足了HTML編寫的須要。 htm

解答三：繼承

個人理解是，層疊指的是上級標籤的樣式會自動繼承到其全部下級標籤，如針對<body>設置的標籤選擇器所設的字體樣式會自動應用到<body>下的<p>中，除非<p>重寫了相關樣式將其覆蓋。
CSS語義化的命名是指用易於理解的名稱對html標籤附加的class或id命名，如對於頁面上方的<div>，可將其id設爲header；頁面下方的<div>設爲footer，能夠加強CSS的可維護性。

基本上層疊的意思就是「繼承」、「權重」、「覆蓋」，經過良好的層級命名更好的實現效果，更少的代碼，更多的功能開發