選擇器的優先順序
css的繼承性指的是應用在乙個標籤上的那些css屬性也會應用到字標籤上。
>
>
p>
div>
div有color:red屬性，那麼p也會繼承color:red屬性。
——最近的祖先樣式比其他祖先樣式優先順序高。
style
="color
: red
">
style
="color
: blue
">
class
="son"
>
div>
div>
div>
style
="color
: red
">
class
="son"
style
="color
: blue
">
div>
div>
選擇器**
示例**
說明通配選擇器
**{}
選擇所有元素
標籤選擇器
標籤名稱
a{}根據標籤選擇元素
類選擇器
.《類名》
.class{}
根據class的值選擇元素
id 選擇器
##id{}
根據id的值選擇元素
屬性選擇器
[《屬性》]
a[href]
根據屬性選擇元素
偽類選擇器
:《偽類》
a:hover{}
偽選擇器不是直接對應html中定義
的元素，而是向選擇器增加特殊的效果
偽元素選擇器
::《偽元素》
a:before{}
同上組合選擇器：
選擇器**
示例**
說明後代選擇器
《選擇器》 , 《選擇器》
.father .child{}
先匹配第二個選擇器的元素，並且屬於第乙個選擇器內
子代選擇器
《選擇器》 > 《選擇器》
.father>.child{}
先匹配第二個選擇器的元素，並且為第乙個選擇器內元素的後代
兄弟選擇器
《選擇器》 + 《選擇器》
.father+.child{}
匹配緊跟第乙個選擇器，並且匹配第二個選擇器內的元素，如緊跟p元素後的a元素
——優先順序關係：內聯樣式 > id選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標籤選擇器 = 偽元素選擇器
class
="content-class"
id="content-id"
style
="color
: black
">
div>
class
="content-class"
id="content-id"
>
div>
class
="content-class"
>
div>
>
div>
/* css */
#content-id
.content-class
div
div的color依次為black、red、blue、grey。
——按a、b、c的順序依次比較大小，大的優先順序高，相等則比較下乙個。若a=b=c，則按「就近原則」來判斷
( a ) 計算選擇符中id選擇器的個數；
( b ) 計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和；
( c ) 計算選擇符中標籤選擇器和偽元素選擇器的個數之和。
"con-id"
>
class
="con-span"
>
span
>
div>
/* css */
#con-id span
div .con-span
#con-id span的a值比div .con-span大，所以span的color為red。
——屬性後插有!important的屬性擁有最高優先順序。若同時插有！important，則再利用規則3、4判斷優先順序。
"con-id"
>
class
="con-span"
>
span
>
div>
/* css */
#con-id span
div .con-span
#con-id span擁有更高權值，但選擇器div .con-span中的background屬性被插入了!important，所以p的background為red。
參考
菜鳥教程 · css 樣式優先順序
css（三） 選擇器的優先順序 css的繼承性
有時候，渲染的比較多，對同乙個元素的渲染你寫了多次，但是有些渲染不起作用？因為選擇器有優先順序 1.內聯式引入方式的優先順序最高，相當於1000 2.id選擇器的優先順序第二高，相當於100 3.class選擇器的優先順序第三高，相當於10 4.標籤選擇器的優先順序最次 5.指定就依這種渲染，在渲染...
CSS樣式的繼承性和優先順序
本文主要內容 1.css繼承性 我是段落1 我是段落2 我是段落3 效果圖如下 上方 中，我們給div標籤增加字型紅色屬性，卻發現，div裡的每乙個子標籤 也增加了紅色屬性。於是我們得到這樣的結論 有一些屬性，當給自己設定的時候，自己的後代都繼承上了，這個就是繼承性。繼承性是從自己開始，直到最小的元...
CSS樣式選擇器優先順序
原文 css樣式選擇器優先順序 css樣式選擇器分為4個等級，a b c d，可以以這四種等級為依據確定css選擇器的優先順序。1.如果樣式是行內樣式 通過style 定義 那麼a 1 2.b為id選擇器的總數 3.c為class類選擇器的數量。4.d為型別選擇器的數量 5.屬性選擇器，偽類選擇器和...