資訊專欄INFORMATION COLUMN
摘要：在我指出標簽名權(quán)重是后，他也覺得自己說錯了。類名標簽，可以解釋為標簽中有此類名的元素。
博客為何而來：今天遇到一個問題：標簽.類名的權(quán)重是多少？這個我也不是很清楚，本來想走捷徑：問問別人，百度一下啊……問了一個同學(xué)，他開口直接說是20；我問為毛是20，他說標簽名10,類名是10，共計20。在我指出標簽名權(quán)重是1后，他也覺得自己說錯了。我百度了一下，也沒有得到什么結(jié)果。覺得自己的驗證過程可以寫篇小博客，然后此刻也不是很慢，那我就不拖拉，就是干咯。
類名.標簽，可以解釋為：標簽中有此類名的元素。
大家都知道：
id選擇器的權(quán)重加0,1,0,0；
類選擇器、屬性選擇器或偽類的權(quán)重加0,0,1,0；
元素和偽元素的權(quán)重加0,0,0,1；
元素和偽元素的權(quán)重加0,0,0,1；
通配選擇器*對權(quán)重沒有貢獻，即0,0,0,0；
最后比較特殊的一個標志!important，它的優(yōu)先級是最高的，為了方便記憶，可以認為它的權(quán)重為1,0,0,0,0；
權(quán)重越高，樣式被應(yīng)用的優(yōu)先級也就越高，約難被其他樣式覆蓋；
話不多說，計算權(quán)重代碼如下：
標簽.類名的權(quán)重是多少？
標簽.類名的權(quán)重是多少?
我計算的方法：通過比較已知的類名權(quán)重和層疊樣式表中權(quán)重相同的樣式，后面的樣式會覆蓋前面的樣式的樣式，來計算出標簽.類名的權(quán)重。放到代碼中具體實現(xiàn)是：通過定義樣式，來改變p標簽的文本顏色，查看瀏覽器渲染結(jié)果，來得出權(quán)重值；
為了高效計算這個值，我們直接在瀏覽器中調(diào)試樣式了。
首先，直接執(zhí)行上面代碼，結(jié)果截圖如下：
分析：我們知道，類名的權(quán)重是10，兩個類名疊加權(quán)重值為20；而且這個樣式位置在最頂部，添加在同一個標簽上的其他樣式都沒有生效，所以其他的樣式權(quán)重都小于20；
其次，直接在瀏覽器中取消已經(jīng)生效的樣式，看看瀏覽器會渲染哪個樣式，渲染哪個，第二個權(quán)重高的樣式可能就是哪個啦，結(jié)果截圖如下：
分析：難道這個權(quán)重是第二高的嗎？我們知道，同權(quán)重的樣式，層疊樣式表中越靠后的會覆蓋前面的，上面代碼中標簽.類名這個樣式是寫在最后，我們可以先換換樣式的位置，再下定論；
接下來，換位置，再執(zhí)行：
代碼如下：
標簽.類名的權(quán)重是多少？ 標簽.類名的權(quán)重是多少?
注意：這里的標簽.類名的樣式已經(jīng)被提到第二的位置了，并且通過前面的操作，我們已經(jīng)知道標簽.類名的權(quán)重小于20，所以我們這里直接把雙類名的權(quán)重給注釋掉；
重新執(zhí)行代碼，運行結(jié)果截圖如下：
分析：更換位置之后的結(jié)果和上面的結(jié)果不符，所以這里是因為靠下的樣式會覆蓋同權(quán)重的樣式的緣故。這里也可以得出，（類名 標簽）的權(quán)重和（標簽.類名）的權(quán)重一樣，也就是11；
小結(jié)：標簽.類名的權(quán)重是11。
好啦，博客隨著有了結(jié)果，也就寫完了，趁著下午天氣不是很熱，磚不燙手，趕緊去搬磚了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113718.html
摘要：在我指出標簽名權(quán)重是后，他也覺得自己說錯了。類名標簽，可以解釋為標簽中有此類名的元素。 博客為何而來：今天遇到一個問題：標簽.類名的權(quán)重是多少？這個我也不是很清楚，本來想走捷徑：問問別人，百度一下啊……問了一個同學(xué)，他開口直接說是20；我問為毛是20，他說標簽名10,類名是10，共計20。在我指出標簽名權(quán)重是1后，他也覺得自己說錯了。我百度了一下，也沒有得到什么結(jié)果。覺得自己的驗證過程...
摘要：什么是優(yōu)先級的權(quán)重作用當(dāng)多個選擇器混合在以前使用時，我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高。1.什么是優(yōu)先級的權(quán)重？ 作用：當(dāng)多個選擇器混合在以前使用時，我們可以通過計算權(quán)重來判斷誰的優(yōu)先級最高。 三個選擇器都是直接選中p標簽 2.權(quán)重問題的計算規(guī)則 2.1首先先計算選擇器中有多少個id，id多的選擇器優(yōu)先級最高 2.2如果id的個數(shù)一樣，那么再看類名的個數(shù)，類名個數(shù)多的優(yōu)先級最高 ....
摘要：選擇器基礎(chǔ)選擇器標簽選擇器針對一類標簽注意選擇的所有，而不是一個。元素元素是文檔結(jié)構(gòu)的基礎(chǔ)。行內(nèi)元素不會在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個元素內(nèi)容中，而不會破壞其顯示。 css選擇器 基礎(chǔ)選擇器 1.標簽選擇器：針對一類標簽 注意：選擇的所有，而不是一個。 p{ font-size:14px; } css 2.ID選擇器：針對某一個特定的標簽使用，只能使...
摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現(xiàn)多次補充后代選擇器中出現(xiàn)的東西很靈活，可以是標簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。 一，選擇器 1，基礎(chǔ)選擇器 1） 標簽選擇器：div{ } ，選擇的所有，而不是一個，用來描述共性。 2） 類選擇器：.class名{ } 多個元素可以同時屬...
閱讀 788·2023-04-25 17:54
閱讀 3007·2021-11-18 10:02
閱讀 1161·2021-09-28 09:35
閱讀 688·2021-09-22 15:18
閱讀 2889·2021-09-03 10:49
閱讀 3085·2021-08-10 09:42
閱讀 2606·2019-08-29 16:24
閱讀 1281·2019-08-29 15:08
