重拾css(7)——選擇器的優(yōu)先級

Shihira 發(fā)布于2019-08-29 12:45 / 2678人閱讀

上一節(jié)我們知道，選擇器種類較多，同一個元素，可以采用不同的選擇器方式選中，此時哪個選擇器的樣式會被最終顯示呢？

特指度

特指度表示一個css選擇器表達式的重要程度，每個選擇器表達式都可以通過一個公式計算出一個數(shù)值，數(shù)越大，越重要。
這個公式叫“I - C - E”計算公式：

I —— Id; 100

C —— Class; 10

E —— Element; 1

即，針對一個css選擇器表達式，遇到一個id就往特指度數(shù)值中加100，遇到一個class就往特指度數(shù)值中加10，遇到一個element就往特指度數(shù)值中加1。
例如：

注意：!important優(yōu)先級最高，高于上面一切。* 選擇器最低，低于一切。

此公式也可由三條規(guī)則來簡單計算：

規(guī)則一，包含ID的選擇器勝過包含Class的選擇器，包含Class的選擇器勝過包含元素的選擇器

規(guī)則二，不同選擇器的特指度比較時，不區(qū)分加載的順序（相同選擇器在層疊時，后加載的覆蓋前加載的），例如：

Jerry

#div1 {color:red;}

.div1 {color:blue;} //雖然.div1后加載，但是特指度低，所以最終還是顯示紅色

規(guī)則三，設(shè)置的樣式高于繼承的樣式，不用考慮特指度，例如下圖顯示顏色為紅色

GPU云服務(wù)器云服務(wù)器優(yōu)先選擇第7天:CSS入門 css選擇 css選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112114.html

相關(guān)文章

重拾css(1)——寫在前邊的話

摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。本系列文章（重拾css）...

li21 2019-08-29 12:45 評論0 收藏0
重拾css(5)——瀏覽器默認樣式

摘要：而依然有效的原因是瀏覽器默認樣式的優(yōu)先級低于外聯(lián)內(nèi)部樣式。例如第二，瀏覽器默認樣式還為設(shè)置了，這個值是對英文比較友好，中文狀態(tài)下就顯得有點擁擠。上一節(jié)介紹了樣式的五種來源，咱們再通過一張圖回顧一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 對于上面的三層，咱們大概都比較熟悉了。下面的兩層中，用戶自定義樣式一般...

guqiu 2019-08-29 12:45 評論0 收藏0
重拾css(6)——選擇器

摘要：選擇器的擴展選擇器本來是的一種規(guī)則，用于為選擇節(jié)點的。但是聰明的人類還是通過選擇器創(chuàng)造出了其他領(lǐng)域非常偉大的作品。被推廣流行的根本原因就是它的基于選擇器的。前文示圖中展示了瀏覽器的渲染過程，那么css與html是如何結(jié)合的呢？答案是——選擇器！ 1.選擇器可分為兩大類：標簽選擇器（*是特殊的標簽），可單標簽，也可上下文多標簽；屬性選擇器（id和class本質(zhì)上也是屬性）。 ...

vincent_xyb 2019-08-29 12:45 評論0 收藏0
重拾css(4)——樣式來源與層疊規(guī)則

摘要：摘自設(shè)計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優(yōu)先級相同條件下例如都來自引用樣式，覆蓋的默認規(guī)則是后者覆蓋前者，但是有一個特殊情況，其實優(yōu)先級最高。這一節(jié)就開始實踐上一節(jié)的思路！ 1.層疊的概念簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結(jié)果的過程。舉一個簡單的例子： showImg(https://segmentfault.com/img/b...

gityuan 2019-08-29 12:45 評論0 收藏0
重拾css(2)——帶著問題出發(fā)

摘要：來不及解釋，快上車有些瀏覽器不完全支持，現(xiàn)在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項常用的標簽，它們的屬性一般默認為和。的設(shè)計初衷是什么具有包裹性例如和兩者的寬度是不一樣的，不信可以為加上背景色試試。來不及解釋，快上車... ... 有些瀏覽器不完全支持css3，現(xiàn)在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？常用的html標簽，它們的display屬性一般默認...

Big_fat_cat 2019-08-29 12:45 評論0 收藏0