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