css選擇器的優先順序問題

　　當我們寫頁面的時候，不知道你會不會產生這樣的問題，為什麼我給他添加的這條樣式分明已經選擇到我要給的元素了，但是他的樣式並沒有生效，那是為什麼呢？

　　定義的屬性有衝突時，瀏覽器會選擇用那一套樣式呢，下麵來介紹一下選擇器的優先順序。

　　一、選擇器的優先順序排序

　　1.   ！important

　　　　在屬性後面寫上這條樣式，會覆蓋掉頁面上任何位置定義的元素的樣式。

　　2.   行內樣式，在style屬性裡面寫的樣式。

　　3.  id選擇器

　　4. class選擇器

　　5. 標簽選擇器

 　   6. 通配符選擇器

　　7. 瀏覽器的自定義屬性和繼承

上面寫的這些排序的順序就是優先順序/權重的大小。 可以自己試一試比較一下他們的大小順序。

 　二、複雜選擇器優先順序，後代選擇器優先順序多種情況。

　　　　有時候當我們寫樣式的時候會用到好多個後代樣式，那麼優先順序的情況是什麼情況呢。來看幾個例子。

　　　　我這裡舉的例子有點少，如果你在學習，你可以多自己寫幾個例子看看效果。

　　　1. id個數多的優先順序高

#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}
//下麵span標簽的顏色是藍色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的顏色</span>
　　　　</div>
　　</div>

　　　　2.id個數相等的看class個數，class越多優先順序越高

//這個例子和題目不符，目的是為了讓你看一下，這個span標簽的樣式是紅色的。 
//雖然第三個樣式的class個數多，但是他這個樣式的span標簽的樣式是繼承的，看第一個的總結，他的優先順序是最低的。所以他沒有選中的優先順序高。
//這裡我就不寫了，自己在第三個樣式p的後面在寫上一個span標簽。你會發現他的樣式優先順序是最高的。
#box .head span{
	color:blue;
}
#box .head span{
	color:red;
}
#box .head .p{
	color:deeppink;
}
<div class="box" id="box">
	<div class="head">
		<p class="p"><span>我的顏色</span></p>
		
	</div>
</div>	

　　3.id和class個數相等，看元素個數，個數越多優先順序越高。

//顏色應用的是第一個的樣式，粉色
#box .head p span{
　　color:deeppink;
} 
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}

<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的顏色</span></p>
　　</div>
</div>

　　4. 優先順序相同，後面的樣式會覆蓋前面的樣式， 不分先後順序，只看選擇器類型和個數。

//藍色，優先順序相同，後面的覆蓋前面的，id、class、元素的個數不分先後順序
#box .head p span{
	color:red;
}
#box div .p span{
	color:blue;
}

<div class="box" id="box">
	<div class="head" id="head">
		<p class="p" id="p"><span>我的顏色</span></p>
	</div>
</div>

　　本來以為這一個內容會寫上好多內容，沒想到寫了這麼一點就完了，如果你通過這篇文章學到了一點知識和內容，那麼我會非常開心的。下周見(*^__^*) 。