CSS權重;慎用!important

時間 2019-11-12

標籤 css 權重慎用 important 欄目 CSS 简体版

原文原文鏈接

初初接觸樣式的前端開發者在碰到樣式覆蓋時，最早選擇的每每是!important。css

可是這種作法很差，應該優先考慮從樣式的級聯屬性或者位置來解決問題。html

切記如下狀況永遠不要使用!important:前端

1. 全局樣式ide

2.組件（插件）樣式性能

能夠使用!important:spa

1. 覆蓋組件或者插件中的style或者important的樣式插件

2. 自定義的一些頁面用於覆蓋全局樣式等3d

如何覆蓋!important:code

1. 使用比原來的important樣式優先級更高的選擇器。htm

/*原來樣式*/
#example {color: #f00!important} 
/*覆蓋樣式*/
div#example { color: #ff0!important}

2. 使用相同的選擇器，可是位置在原來的選擇器以後

css的引入方式

按照優先級由高到低：

1. 行內樣式 <div style=""></div>

2.內聯樣式 <head><style></style></head>

3.引入外部css

CSS權重（優先級）

css優先級由css選擇器種類和數量決定。

css選擇器

css選擇器種類按照權重從低到高有：

0. 統配選擇符，*

關係選擇, 如 + > ~

否認僞類 :not()

權重：0

⚠️：該等級的符號不影響優先級。可是:not()內部的會影響。

:not 否認僞類在優先級計算中不會被看做是僞類. 事實上, 在計算選擇器數量時仍是會把其中的選擇器當作普通選擇器進行計數.

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: blueviolet;
}

<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>

1. 類型選擇器（元素原則器），如h1,div；

僞元素選擇器 ,如 ::before

權重1

2. 類選擇器，如 .colorRed

屬性選擇器，如 [type='radio]

僞類，如 :hover

權重10

⚠️1中的選擇器級別相同，2中的也是相同的優先級。

3. ID 選擇器，如： #example

權重100

4. 行內樣式， style

權重1000

5. !important

權重最高

css權重計算

1    * { }                           -> 0               
2    li { }                          -> 1 
3    li:first-line { }               ->2 (一個元素，一個僞元素)
4    ul li { }                       -> 2 (兩個元素)
5    ul ol+li { }                    ->3 (3個元素)
6    h1 + *[rel=up] { }              -> 11 (一個元素，一個屬性選擇器)
7    ul ol li.red { }                ->13 (三個元素，一個類)
8    li.red.level { }                ->21 (一個元素，兩個類)
9    style=「」                        ->1000 (一個行內樣式)
10   p { }                           ->1 (一個元素)
11   div p { }                       -> 2 (兩個元素)
12   .sith                           -> 10 (一個類)
13   div p.sith { }                  -> 12 (兩個元素，一個類)
14   #sith                           ->100 ( 一個id)
15   body #darkside .sith p { }      -> 112 (一個元素+ 一個ID + 一個類 + 一個元素 ；1+100+10+1)

css權重規則

1. 不一樣權重，權重高的樣式優先 (注意權重相同，可是選擇器級別不一樣的狀況)

 1 <html>
 2 <head>
 3 <style type="text/css">
 4  div div div div div div div div div div div{ color: blue} /*權重11*/
 5 .red{ color: red} /*權重10*/
 6 
 7 </style>
 8 </head>
 9 
10 <body>
11 <div>
12   <div>
13     <div>
14       <div>
15         <div>
16           <div>
17             <div>
18               <div>
19                 <div>
20                   <div>
21                     <div class="red">
22                       12
23                     </div>
24                   </div>
25                 </div>
26               </div>
27             </div>
28           </div>
29         </div>
30       </div>
31     </div>
32   </div>
33 </div>
34 </body>
35 
36 </html>

如上圖所示，高等級的權重永遠大於低等級的，即便低等級的權重和大於高等級的權重值。

2. 相同權重，位置靠後面的優先

3. css引入方式：行內>內斂>外部

css選擇器性能（參考搬運）

css選擇器如何工做？

css提高性能

1. 效率--> 搜索個數

id選擇器<類<元素

2. 次數--> 搜索層數

1)不使用級聯，使用BEM（block_element-modifier）的命名方式。

不使用.nav .rightbar . inner

使用.nav_rightbar_inner

2)使用面向屬性的命名方式

.l{ float: left }
.tc{ text-align:center; }
.auto{ margin-left:auto; margin-right:auto; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。