CSS优先级计算
CSS的權(quán)重
一、CSS的引入方式
三種引入方式的區(qū)別
index.html文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="body.css"><style type="text/css">body {background: red;}</style></head><body style="background: yellow;"></body></html>body.css文件
body {background: green;}- 無(wú)論link和style標(biāo)簽放在head內(nèi)，還是放在body內(nèi)，或者放在html標(biāo)簽結(jié)尾，頁(yè)面都會(huì)呈現(xiàn)yellow
- 去掉body上的style標(biāo)簽
- 調(diào)整link和style標(biāo)簽的先后順序。link在前，style標(biāo)簽在后，頁(yè)面呈現(xiàn)red，相反，頁(yè)面會(huì)呈現(xiàn)green
二、獲取節(jié)點(diǎn)的方式
id
在一個(gè)頁(yè)面中id值應(yīng)該是唯一，但是，當(dāng)出現(xiàn)多個(gè)相同id時(shí)，樣式對(duì)所有id節(jié)點(diǎn)是有效的，使用方式：#后面跟節(jié)點(diǎn)id值
<body><p id="id_p">第一個(gè)段落</p><p id="id_p">第二個(gè)段落</p> </body> #id_p {color: red; }結(jié)果顯示，兩個(gè)段落中的文字都呈現(xiàn)red
class
使用class可以對(duì)多個(gè)節(jié)點(diǎn)同時(shí)設(shè)置樣式，并且可以疊加class使用。使用方式.后面跟節(jié)點(diǎn)單個(gè)class名
<body><p class="class-p">第一個(gè)段落</p><p class="class-p class-p-2">第二個(gè)段落</p> </body> .class-p {color: red; } .class-p-2 {color: green; }此時(shí)，第一個(gè)段落呈現(xiàn)red，第二個(gè)段落呈現(xiàn)green
調(diào)整html
<body><p class="class-p">第一個(gè)段落</p><p class="class-p-2 class-p">第二個(gè)段落</p><!-- 調(diào)換class-p 和 class-p-2 的順序 --> </body>調(diào)整class-p和class-p-2的位置后，頁(yè)面呈現(xiàn)效果不變。說(shuō)明：class樣式的渲染和class的使用順序無(wú)關(guān)，與class樣式設(shè)置的先后順序有關(guān)，同權(quán)重的class樣式，在樣式設(shè)置中，靠后的樣式設(shè)置覆蓋之前的樣式設(shè)置
屬性
通過(guò)節(jié)點(diǎn)上的屬性也可以得到要進(jìn)行樣式設(shè)置的節(jié)點(diǎn)
<body><p>第一個(gè)段落</p><p title="第二個(gè)段落的title">第二個(gè)段落</p> </body> [title] {color: red; }第二個(gè)段落有title屬性，所以第二個(gè)段落呈現(xiàn)red
標(biāo)簽
通過(guò)標(biāo)簽名獲取節(jié)點(diǎn)進(jìn)行樣式設(shè)置
<body><p>第一個(gè)段落</p><p>第二個(gè)段落</p> </body> p {color: red; }頁(yè)面中所有p標(biāo)簽節(jié)點(diǎn)呈現(xiàn)red
混合
以上四種方式可以混合使用，對(duì)相應(yīng)的節(jié)點(diǎn)進(jìn)行樣式設(shè)置。結(jié)合方式包括層級(jí)嵌套、樣式疊加、節(jié)點(diǎn)關(guān)聯(lián)等。最終以權(quán)重高者為呈現(xiàn)效果。
三、樣式權(quán)重
以上四種方式，針對(duì)單個(gè)而言，id最高，class和屬性同級(jí)（后面的樣式覆蓋之前的樣式），標(biāo)簽最低。
當(dāng)四種方式混合使用時(shí)，則以權(quán)重的結(jié)果為準(zhǔn)。對(duì)同一結(jié)點(diǎn)存在的id、class、屬性和標(biāo)簽樣式進(jìn)行排序，排位第一者為最終呈現(xiàn)效果。例如：對(duì)于節(jié)點(diǎn)p存在多種類型的樣式設(shè)置，首先挑選所有帶id的樣式，包括嵌套樣式。相同id下，對(duì)另一類型樣式進(jìn)行排序
<body class="body"><p id="id_p">第一個(gè)段落</p> </body> .body #id_p {color: red; }#id_p {color: green }雖然兩種樣式設(shè)置都有id，并且green效果在red之后被設(shè)置，但是通過(guò)排序可以得到相同#id_p下，前一個(gè)存在.body，所以最終呈現(xiàn)效果為red
存在class、屬性和標(biāo)簽的樣式時(shí)，依次排序，同類型或同權(quán)重（class和屬性同權(quán)重）的樣式，靠后的樣式覆蓋之前的樣式（以類型為準(zhǔn)，不以名稱為準(zhǔn)），最終排位第一者為最終呈現(xiàn)效果。
注意：
四、!important
!important為樣式中的特例，它的權(quán)重為最高，高于id、class、屬性、標(biāo)簽以及style屬性
<body class="body" style="background: red"></body> .body {background: green !important; }頁(yè)面呈現(xiàn)效果為green。但是當(dāng)對(duì)樣式設(shè)置進(jìn)行排序時(shí)，仍然是同類型樣式下，以另一類型權(quán)重高者為最終效果。例如
body.body {background: blue !important; } .body {background: green !important; }相同class及!important下，前一種樣式設(shè)置存在body標(biāo)簽，后一種則沒(méi)有，所以最終效果呈現(xiàn)blue
說(shuō)明
盡量避免使用!important。因?yàn)?important權(quán)重最高，會(huì)對(duì)節(jié)點(diǎn)的該屬性做強(qiáng)制性設(shè)置，在使用時(shí)要慎重
- 引入插件時(shí)，對(duì)插件中的樣式進(jìn)行強(qiáng)覆蓋。當(dāng)引入插件時(shí)，在不想修改插件中的樣式代碼情況下，可通過(guò)!important對(duì)插件內(nèi)的樣式屬性進(jìn)行強(qiáng)制復(fù)寫(xiě)
- 對(duì)行內(nèi)樣式進(jìn)行強(qiáng)覆蓋。對(duì)于自動(dòng)生成或者動(dòng)態(tài)引入的的帶有行內(nèi)樣式html結(jié)構(gòu)時(shí)，可以通過(guò)!important對(duì)行內(nèi)樣式進(jìn)行強(qiáng)制復(fù)寫(xiě)
變通
!important在很多時(shí)候是不建議使用的，在stylelint中有一項(xiàng)規(guī)則即禁止使用!important。有一種變通的方式，可以在多數(shù)情況下實(shí)現(xiàn)類似!important`的效果
<body class="body"><p class="p"><span class="span">一段文本</span></p> </body> .body .p .span {color: red; } .span.span.span.span.span {/** 自身樣式疊加 **/color: green; }在不考慮行內(nèi)樣式和id的情況下，對(duì)自身樣式進(jìn)行重復(fù)疊加多次使用，可以增加class權(quán)重，對(duì)樣式進(jìn)行復(fù)寫(xiě)。
使用前提：
好處：不用考慮DOM層級(jí)關(guān)系，減少層級(jí)嵌套
五、總結(jié)
綜合以上說(shuō)明，權(quán)重的計(jì)算基本遵從以下規(guī)則：
嵌套的使用建議
樣式嵌套使用，除了增加權(quán)重外，也體現(xiàn)了DOM的某種結(jié)構(gòu)關(guān)系。但嵌套并不是在任何情況下都需要的。
- 嵌套多用于塊內(nèi)獨(dú)有的樣式設(shè)置。某種樣式僅在某個(gè)塊內(nèi)有效，可使用嵌套。
- 多個(gè)頁(yè)面同時(shí)開(kāi)發(fā)時(shí)，為避免合并后樣式被覆蓋，可使用嵌套。
嵌套的使用并不是越多越好。嵌套越多，權(quán)重越大，但同時(shí)對(duì)頁(yè)面的性能消耗也越大。建議使用繼承和樣式疊加。
轉(zhuǎn)載于:https://www.cnblogs.com/tian-xie/p/7192841.html
總結(jié)
- 上一篇： Window10+VS2015+DevE
- 下一篇： mongodb 3.4单实例安装与备