css選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先

標籤：

通配選擇符* { sRules } 
 
類型選擇符E { sRules }  
td { font-size:14px; width:120px; } 
  
屬性選擇符 
E [ attr ] { sRules } 
E [ attr = value ] { sRules } 
E [ attr ~= value ] { sRules } 
E [ attr |= value ] { sRules }  
h[title] { color: blue; }/* 所有具有title屬性的h對象*/ 
span[class=demo] { color: red; }  
div[speed="fast"][dorun="no"] { color: red; } 
a[rel~="copyright"] { color:black; } 

 
包含選擇符E1 E2 { sRules } 
table td { font-size:14px; } 

 
子物件選擇符E1 > E2 { sRules } 
div ul>li p { font-size:14px; } 

 
ID選擇符 #ID { sRules } 
 
類選擇符 E.className { sRules } 
 
選擇符分組  
E1 , E2 , E3 { sRules } 
  
偽類及偽對象選擇符  
E : Pseudo-Classes { sRules }  
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang] 
E : Pseudo-Elements { sRules }  
( Pseudo-Elements )[:first-letter :first-line :before :after] 
可以繼承的有：
font-size font-family color  
不可繼承的一般有：
border padding margin background-color width height 等



關於CSS specificity  
CSS 的specificity 
特性或稱非凡性，它是衡量一個衡量CSS值優先順序的一個標準，既然作為標準，就具有一套相關的判定規定及計算方式，
specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個層級，值從左至右，左面的最大，一級大於一級，數位之間沒有進位，層級之間不可超越。
在多個選擇符應用於同一個元素上那麼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,6
1個屬性選擇符{ [id=”totals”] }      Specificity值為0,0,1,0 2個其他選擇符{ >  > }            Specificity值為0,0,0,0 最終：Specificity值為 0,0,1,6  
 !important 的優先順序最高 

使用!important可以改變優先順序別為最高，其次是style對象，然後是id > class >tag ，另外在同級樣式按照申明的順序後出現的樣式具有高優先順序。

css選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先