CSS選擇器有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先？
阿新 • • 發佈：2018-12-25
CSS選擇器有哪些？
| 選擇符型別 | 例子 | 例子描述 |
|---|---|---|
| 通用選擇器 | * | |
| 類別選擇器(.class) | .intro |
選擇class=”intro”的所有元素 |
| ID選擇器(#id) | #first |
選擇id=”first”的所有元素 |
| 標籤選擇器(element) | div |
選擇所有<div>標籤 |
| 後代選擇器(element element) | div p |
選擇<div>元素內部的所有<p>元素 |
| 子選擇器(element>element) | div>p |
選擇父元素為<div>的所有<p>元素 |
| 群組選擇器(element,element) | div,p |
選擇所有<div>和<p>元素 |
| 相鄰同胞選擇器(element+element) | div+p |
選擇緊接在<div>之後的所有<p>元素 |
偽類選擇器(:link :visited :active :hover :focus :first-child) |
a:link a:visited a:active a:hover input:focus p:first-child |
（選擇所有未被訪問的或所有已被訪問的或活動的連結）（選擇滑鼠指標位於其上鍊接）（選擇獲得的焦點的input 元素） |
偽元素選擇器(:first-letter :first-line :before :after :lang(language)) |
p:first-letter p:first-line p:before p:after p:lang(it) |
選擇每個 元素的首字母；選擇每個 元素的首行；在每個 元素的內容之前插入內容；在每個 元素的內容之後插入內容；選擇帶有以 “it” 開頭的 lang 屬性值的每個 元素 |
屬性選擇器([attribute] [attribute=value] [attribute~=value] [attribute|=value] ) | [target=_blank] |
[attribute~=value]選擇包含一個以空格分隔的詞為value的所有元素；[attribute|=value]選擇屬性的值等於value，或值以 value- 開頭的所有元素 |
CSS3新增選擇器如下：
| css3新增選擇器型別 | 具體選擇器 | 描述 |
|---|---|---|
| 層次選擇器 | p~ul |
選擇前面有p元素的每個ul元素 |
| 偽類選擇器 | :first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-of-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector) |
|
| 屬性選擇器 | [attribute*=value] [attribute^=value] [attribute$=value] |
選擇屬性中包含value值的屬性，[attribute~=value] 是指包含value整個單詞、選擇屬性以value開頭的所有元素、選擇屬性以value結束的所有元素 |
CSS哪些屬性可以繼承？
css繼承特性主要是指文字方面的繼承，盒模型相關的屬性基本沒有繼承特性。
不可繼承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可繼承的：
visibility和cursor
終極塊級元素可繼承的：
text-indent和text-align
內聯元素可繼承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可繼承的：
list-style、list-style-type、list-style-position、list-style-image