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