資訊專欄INFORMATION COLUMN
摘要：使用子選擇器，會(huì)增加選擇符的權(quán)重，的選擇符權(quán)重越高，樣式越不易被覆蓋，所以除非確定結(jié)構(gòu)非常穩(wěn)定，一定不會(huì)再修改了，否則盡量使用子選擇器。在進(jìn)過大量實(shí)踐后，我并不認(rèn)為多有太大的壞處，相反，與使用子選擇器相比，新添加反而跟利于維護(hù)。
CSS設(shè)置的樣式是可以層疊的，如下面[代碼1]
[代碼1]
CSS的低權(quán)重原則
“CSS的低權(quán)重原則”既可以的到“font-size:40px”的樣式，又可以得到“color： red”的樣式。如果兩個(gè)不同選擇符設(shè)置的樣式有沖突，又會(huì)如何？如下面[代碼2]
[代碼：CSS層疊有沖突的情況]
CSS的低權(quán)重原則
“CSS的低權(quán)重原則”顏色會(huì)是什么呢？是對(duì)“span”設(shè)置的“color:green”呢，還是第“.test”設(shè)置的“color:red”呢？這就涉及CSS選擇符的權(quán)重問題了。
CSS的選擇符是有權(quán)重的，當(dāng)不同選擇符的樣式設(shè)置有沖突時(shí)，會(huì)采用權(quán)重高的選擇符設(shè)置的樣式。權(quán)重的規(guī)則是這樣的：HTML標(biāo)簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100，例如p的權(quán)重是1，“div em”的權(quán)重是1+1=2，“strong.demo”的權(quán)重是10+1=11，“#test.red”的權(quán)重是100+10=110.
[代碼2]中，選擇符span的權(quán)重是1，“.test”的權(quán)重是10，所以“CSS的低權(quán)重原則”的color應(yīng)該是red。
但是如果是如下[代碼3]時(shí)，又會(huì)如何呢？
CSS的低權(quán)重原則
span的標(biāo)簽同時(shí)掛了test和test2兩個(gè)class，他們的權(quán)重都是10，那么“CSS的低權(quán)重原則”的color又該是哪個(gè)呢？如果 CSS選擇符權(quán)重相同，那么樣式就遵循就近原則，哪個(gè)選擇符后定義，就采用哪個(gè)選擇符的樣式。[代碼3]中test2后定義，所以color會(huì)采用“.test2”的設(shè)置為green。
如果改變“.test”和“.test2”定義的位置，如[代碼4]
CSS的低權(quán)重原則
那么 “CSS的低權(quán)重原則”的color就為red了。
需要強(qiáng)調(diào)的是就近原則指的是選擇符 的先后順序，而不是掛class名的先后順序，CSS的低權(quán)重原則和CSS的低權(quán)重原則沒有區(qū)別。
CSS選擇符權(quán)重是個(gè)容易被忽略的問題。但事實(shí)上如果不太注意選擇符的權(quán)重，常會(huì)出現(xiàn)意向不到的小麻煩。例如下面[代碼5]
CSS的選擇符權(quán)重很重要
現(xiàn)在需要將“很重要”三個(gè)字設(shè)置為紅色，我們應(yīng)該怎么做呢？
方案一，利用子選擇器，如[代碼6]
CSS的選擇符權(quán)重很重要
方案二，新建class，如[代碼7]
CSS的選擇符權(quán)重很重要
很多工程師推薦使用方案一，因?yàn)槭褂米舆x擇器可以避免新增class，讓HTML代碼更簡(jiǎn)潔，這么考慮是有道理的，但如果這時(shí)需求有變化，需要添加新的額文字進(jìn)來，如[代碼8]
CSS的選擇符權(quán)重很重要，我們要小心處理
要求我們將“小心處理”設(shè)置為綠色，我們可以這么做，如[代碼9]
CSS的選擇符權(quán)重很重要，我們要小心處理
本以為小心處理會(huì)被選擇符font設(shè)置為綠色，但它卻被選擇符權(quán)重更高的“#test span”設(shè)置成了紅色，子選擇器在無意中影響到了我們新添加的代碼。如果想要達(dá)到我們的預(yù)期，我們需要按代碼[9]重寫
CSS的選擇符權(quán)重很重要，我們要小心處理
而如果使用方案二呢？
CSS的選擇符權(quán)重很重要，我們要小心處理
因?yàn)闆]有使用子選擇器，所以我們添加新代碼掛上新的class就可以順利的完成樣式的設(shè)置了。
使用子選擇器，會(huì)增加CSS選擇符的權(quán)重，CSS的選擇符權(quán)重越高，樣式越不易被覆蓋，所以除非確定HTML結(jié)構(gòu)非常穩(wěn)定，一定不會(huì)再修改了，否則盡量使用子選擇器。為了保證樣式容易被覆蓋，提高可維護(hù)性，CSS選擇符權(quán)重盡可能低。
少用子選擇器，就需要多添加class，在Web標(biāo)準(zhǔn)盛行的初期，很多工程師認(rèn)為多添加class是不好的，如果能使用子選擇器就應(yīng)該盡量使用，使用大量的class的做法叫做“多class癥”。在進(jìn)過大量實(shí)踐后，我并不認(rèn)為多class有太大的壞處，相反，與使用子選擇器相比，新添加class反而跟利于維護(hù)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115196.html
摘要：通用選擇器，子選擇器和相鄰?fù)x擇器并不在這四個(gè)等級(jí)中，所以他們的權(quán)值都為，優(yōu)先級(jí)最高，萬不得已的情況下才用。規(guī)范命名風(fēng)格規(guī)范文件命名統(tǒng)一為小寫的英文字母盡量少用拼音，如。當(dāng)名字需要組合時(shí)，可以采用文件名的規(guī)范。 css樣式的權(quán)值(權(quán)重) 權(quán)值等級(jí)的定義 第一等：代表內(nèi)聯(lián)樣式，如: style=，權(quán)值為1000。第二等：代表ID選擇器，如：#content，權(quán)值為100。第三等：代表類...
? 本文內(nèi)容： ? 層疊性 繼承性 優(yōu)先級(jí) 權(quán)重計(jì)算方法（特異性） ? ? 首發(fā)日期：2018-05-01 層疊性： 層疊性是指當(dāng)一個(gè)標(biāo)簽被設(shè)置了多個(gè)重復(fù)的樣式的時(shí)候，一個(gè)屬性會(huì)覆蓋另外一個(gè)屬性。 比如：先給div設(shè)置背景顏色為紅色，然后設(shè)置背景顏色為粉紅色，那么最終顏色可能為紅色，也可能為粉紅色（明顯的兩種顏色設(shè)置不能并立，所以只為其一，這里沒給出確定答案是因?yàn)檫€要考慮優(yōu)先級(jí)...
摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...
摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...
摘要：之小白初入江湖超文本標(biāo)記語言簡(jiǎn)稱是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。是塊級(jí)元素，是行內(nèi)元素。層疊樣式表簡(jiǎn)稱是一種用來為結(jié)構(gòu)化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標(biāo)記語言(HyperText Markup Language, 簡(jiǎn)稱HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言...
閱讀 1313·2021-11-04 16:09
閱讀 3515·2021-10-19 11:45
閱讀 2408·2021-10-11 10:59
閱讀 1021·2021-09-23 11:21
閱讀 2774·2021-09-22 10:54
閱讀 1148·2019-08-30 15:53
閱讀 2617·2019-08-30 15:53
閱讀 3490·2019-08-30 12:57
