在節點元素上，使用style屬性
通過link引入外部檔案
通過style標籤在頁面內引入
三種引入方式的區別
index.html檔案
body.css檔案
body第二種和第三種為平級引入，後引入的樣式覆蓋之前的引入樣式
id
class
標籤屬性
id
在乙個頁面中id值應該是唯一，但是，當出現多個相同id時，樣式對所有id節點是有效的，使用方式：#後面跟節點id值
第乙個段落
第二個段落
#id_pred
id相對class和標籤具有更高的權重，當id和class、標籤同時對乙個節點設定樣式時，id的權重為最高
通過link和style標籤對同乙個id設定樣式時，後引入的樣式覆蓋之前的樣式
class
使用class可以對多個節點同時設定樣式，並且可以疊加class使用。使用方式.後面跟節點單個class名
第乙個段落
第二個段落
.class-p
.class-p-2
red，第二個段落呈現green
調整html
第乙個段落
第二個段落
class-p和class-p-2的位置後，頁面呈現效果不變。說明：class樣式的渲染和class的使用順序無關，與class樣式設定的先後順序有關，同權重的class樣式，在樣式設定中，靠後的樣式設定覆蓋之前的樣式設定
屬性通過節點上的屬性也可以得到要進行樣式設定的節點
第乙個段落
第二個段落
[title]title屬性，所以第二個段落呈現red
標籤通過標籤名獲取節點進行樣式設定
第乙個段落
第二個段落
pp標籤節點呈現red
混合以上四種方式可以混合使用，對相應的節點進行樣式設定。結合方式包括層級巢狀、樣式疊加、節點關聯等。最終以權重高者為呈現效果。
以上四種方式，針對單個而言，id最高，class和屬性同級（後面的樣式覆蓋之前的樣式），標籤最低。
當四種方式混合使用時，則以權重的結果為準。對同一結點存在的id、class、屬性和標籤樣式進行排序，排位第一者為最終呈現效果。例如：對於節點p存在多種型別的樣式設定，首先挑選所有帶id的樣式，包括巢狀樣式。相同id下，對另一型別樣式進行排序
第乙個段落
.body #id_p
#id_p
id，並且green效果在red之後被設定，但是通過排序可以得到相同#id_p下，前乙個存在.body，所以最終呈現效果為red
存在class、屬性和標籤的樣式時，依次排序，同型別或同權重（class和屬性同權重）的樣式，靠後的樣式覆蓋之前的樣式（以型別為準，不以名稱為準），最終排位第一者為最終呈現效果。
注意：巢狀、疊加、>、+等方式，不會影響最終效果。
:nth-child、:first-child、:last-child等偽類高於class和屬性
!important為樣式中的特例，它的權重為最高，高於id、class、屬性、標籤以及style屬性
.bodygreen。但是當對樣式設定進行排序時，仍然是同型別樣式下，以另一型別權重高者為最終效果。例如
body.body
.body
class及!important下，前一種樣式設定存在body標籤，後一種則沒有，所以最終效果呈現blue
說明盡量避免使用!important。因為!important權重最高，會對節點的該屬性做強制性設定，在使用時要慎重
使用場景
變通!important在很多時候是不建議使用的，在stylelint中有一項規則即禁止使用!important。有一種變通的方式，可以在多數情況下實現類似!important`的效果
一段文字
.body .p .span
.span.span.span.span.span
id的情況下，對自身樣式進行重複疊加多次使用，可以增加class權重，對樣式進行複寫。
使用前提：
沒有行內樣式style屬性
沒有id樣式
自身樣式疊加次數多餘巢狀個數
好處：不用考慮dom層級關係，減少層級巢狀
綜合以上說明，權重的計算基本遵從以下規則：
按型別比對，型別權重高者顯示；
同型別，按數量比對，多者顯示；
同數量，按先後順序比對，後者顯示
樣式巢狀使用，除了增加權重外，也體現了dom的某種結構關係。但巢狀並不是在任何情況下都需要的。
巢狀的使用並不是越多越好。巢狀越多，權重越大，但同時對頁面的效能消耗也越大。建議使用繼承和樣式疊加。
css優先順序計算
主要的css選擇器有id,class,tag,等，而通常需要對其優先順序進行判斷的有id,class,tag,另外內聯樣式和 important也和css的優先順序有關係。如果將這五種不同情況的優先順序以數字的形式來表示的話，其對應關係如下 important 10000 內聯樣式 1000 id ...
CSS優先順序計算規則
css的優先順序可以分為引入優先順序和宣告優先順序 css按照引入方式的不同可以分為 內聯樣式 外部樣式和內部樣式 內聯樣式 直接寫在html標籤內部的css樣式 外部樣式 使用link引入的外部css樣式 內部樣式 在style標籤內部書寫的css樣式 優先順序為 內聯樣式 外部樣式 內部樣式 c...
css 優先順序
當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...