資訊專欄INFORMATION COLUMN
上一節我們知道，選擇器種類較多，同一個元素，可以采用不同的選擇器方式選中，此時哪個選擇器的樣式會被最終顯示呢？
特指度特指度表示一個css選擇器表達式的重要程度，每個選擇器表達式都可以通過一個公式計算出一個數值，數越大，越重要。
這個公式叫“I - C - E”計算公式：
I —— Id; 100
C —— Class; 10
E —— Element; 1
即，針對一個css選擇器表達式，遇到一個id就往特指度數值中加100，遇到一個class就往特指度數值中加10，遇到一個element就往特指度數值中加1。
例如：
注意：!important優先級最高，高于上面一切。* 選擇器最低，低于一切。
此公式也可由三條規則來簡單計算：
規則一，包含ID的選擇器勝過包含Class的選擇器，包含Class的選擇器勝過包含元素的選擇器
規則二，不同選擇器的特指度比較時，不區分加載的順序（相同選擇器在層疊時，后加載的覆蓋前加載的），例如：
#div1 {color:red;}
.div1 {color:blue;} //雖然.div1后加載，但是特指度低，所以最終還是顯示紅色
規則三，設置的樣式高于繼承的樣式，不用考慮特指度，例如下圖顯示顏色為紅色
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/112114.html
摘要：本系列文章重拾主要參考王福朋知多少，結合自己的理解和學習需要，修改或添加了一些內容，難免有失偏頗，僅供自我學習參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統學習有關，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統學習css的想法。 本系列文章（重拾css）...
摘要：而依然有效的原因是瀏覽器默認樣式的優先級低于外聯內部樣式。例如第二，瀏覽器默認樣式還為設置了，這個值是對英文比較友好，中文狀態下就顯得有點擁擠。 上一節介紹了樣式的五種來源，咱們再通過一張圖回顧一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般...
摘要：選擇器的擴展選擇器本來是的一種規則，用于為選擇節點的。但是聰明的人類還是通過選擇器創造出了其他領域非常偉大的作品。被推廣流行的根本原因就是它的基于選擇器的。 前文示圖中展示了瀏覽器的渲染過程，那么css與html是如何結合的呢？答案是——選擇器！ 1.選擇器 可分為兩大類： 標簽選擇器（*是特殊的標簽），可單標簽，也可上下文多標簽； 屬性選擇器（id和class本質上也是屬性）。 ...
摘要：摘自設計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優先級相同條件下例如都來自引用樣式，覆蓋的默認規則是后者覆蓋前者，但是有一個特殊情況，其實優先級最高。 這一節就開始實踐上一節的思路！ 1.層疊的概念 簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結果的過程。舉一個簡單的例子： showImg(https://segmentfault.com/img/b...
摘要：來不及解釋，快上車有些瀏覽器不完全支持，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項常用的標簽，它們的屬性一般默認為和。的設計初衷是什么具有包裹性例如和兩者的寬度是不一樣的，不信可以為加上背景色試試。 來不及解釋，快上車... ... 有些瀏覽器不完全支持css3，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？ 常用的html標簽，它們的display屬性一般默認...
閱讀 1154·2023-04-26 01:34
閱讀 3577·2023-04-25 20:58
閱讀 3972·2021-11-08 13:22
閱讀 2259·2019-08-30 14:17
閱讀 2657·2019-08-29 15:27
閱讀 2799·2019-08-29 12:45
閱讀 3358·2019-08-29 12:26
閱讀 3000·2019-08-28 17:51
