css選擇器有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先

時間 2019-11-10

標籤 css 選擇器哪些屬性能夠繼承優先級算法如何計算內聯 important 哪一個優先欄目 CSS 简体版

原文原文鏈接

CSS選擇器：
基本能夠分爲通配選擇器，標籤選擇器，類選擇器，ID選擇器，簡單屬性選擇，具體屬性選擇，根據部分屬性值選擇，特定屬性選擇，從結構上來分還有後代選擇器，子元素選擇器，相鄰兄弟選擇器以及僞類。
詳細一些請見下表：
類型選擇符 E{}
屬性選擇符
E[attr]{}
E[attr=value]{}選擇具備attr屬性且屬性值等於value的E
E[attr~=value]{}選擇具備attr屬性且屬性值爲用-連字符分隔的字詞列表，由value開始的E.例如

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 p[class~="important"]
 6 {
 7 color: red;
 8 }
 9 </style>
10 </head>
11 
12 <body>
13 <h1>能夠應用樣式：</h1>
14 <p class="important warning">This is a paragraph.</a>
15 <p class="important">This is a paragraph.</a>
16 
17 <hr />
18 
19 <h1>沒法應用樣式：</h1>
20 <p class="warning">This is a paragraph.</a>
21 </body>
22 </html>

View Code

除了上面的三個，還有部分請見下表


包含選擇符（又稱後代選擇符） E1 E2{}

子對象選擇符 E1>E2{}

ID選擇符 #ID{}

類選擇符 E.className{}

選擇符分組 E1,E2,E3{}

結合後代選擇器，類選擇器和子選擇器 例如：table.company td>p
上面的選擇器會選擇做爲td元素子元素的全部P元素，這個td元素自己從table元素繼承，而且該table元素有一個包含company的class屬性。

相鄰兄弟選擇器 E1 + E2｛｝這裏須要注意的是用一個選擇符只能選擇兩個相鄰兄弟中的第二個元素，舉個例子 li + li {font-weight:bold;}只會把第二項和第三項加粗，第一個列表項步受影響

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 li + li {font-weight:bold;}
 6 </style>
 7 </head>
 8 
 9 <body>
10 <div>
11   <ul>
12     <li>List item 1</li>
13     <li>List item 2</li>
14     <li>List item 3</li>
15   </ul>
16   <ol>
17     <li>List item 1</li>
18     <li>List item 2</li>
19     <li>List item 3</li>
20   </ol>
21 </div>
22 </body>
23 </html>

結果爲還有一點要注意的是，顧名思義，相鄰兄弟必定要有相同的父元素。

僞類及僞對象選擇符：
僞類

僞元素

舉例以下：

<html>
<head>
<style type="text/css">
p:first-line 
{
color: #ff0000;
font-variant: small-caps
}
</style>
</head>

<body>
<p>
You can use the :first-line pseudo-element to add a special effect to the first line of a text!
</p>
</body>

</html>

元素p中的內容顏色和字體就都變成了這樣


哪些能夠繼承呢
能夠的有 font-size font-family color 
不能夠的有 border padding margin background-color width height等

優先級算法計算的問題：css

在多個選擇符應用於同一個元素上那麼Specificity值高的最終得到優先級。 選擇符Specificity值列表：規則： 1. 行內樣式優先級Specificity值爲1,0,0,0，高於外部定義。 如：<div style=」color: red」>sjweb</div> 外部定義指經由<link>或<style>標籤訂義的規則； 2.!important聲明的Specificity值最高； 3.Specificity值同樣的狀況下，按CSS代碼中出現的順序決定，後者CSS樣式居上； 4.由繼續而獲得的樣式沒有specificity的計算，它低於一切其餘規則(好比全局選擇符*定義的規則)。 算法：當遇到多個選擇符同時出現時候 按選擇符獲得的Specificity值逐位相加， {數位之間沒有進制 好比說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就獲得最終計算得的specificity， 而後在比較取捨時按照從左到右的順序逐位比較。
實例分析：
1.div { font-size:12px;} 分析：  1個元素{ div}，Specificity值爲0,0,0,1 
2.body div p{color: green;} 分析：3個元素{ body div p }，Specificity值爲0,0,0,3   
3.div .sjweb{ font-size:12px;} 分析：  1個元素{ div }，Specificity值爲0,0,0,1 1個類選擇符{.sjweb}，Specificity值爲0,0,1, 0 最終：Specificity值爲 0,0,1,1
4.Div # sjweb { font-size:12px;} 分析：  1個元素{ div }，Specificity值爲0,0,0,1 1個類選擇符{.sjweb}，Specificity值爲0,1,0, 0 最終：Specificity值爲 0,1,0,1 5.html > body div [id=」totals」] ul li > p {color:red;} 分析： 
6個元素{ html body div ul li p}  Specificity值爲0,0,0,61個屬性選擇符{ [id=」totals」] }      Specificity值爲0,0,1,0 2個其餘選擇符{ >  > }            Specificity值爲0,0,0,0 最終：Specificity值爲 0,0,1,6   
用!important能夠改變優先級別爲最高，其次是style對象，而後是id > class >tag ，另外在同級樣式按照申明的順序後出現的樣式具備高優先級。