首先，當我們給css中的選擇器設定樣式後，有一些屬性並沒有起作用。通過firebug檢視發現一些屬性被覆蓋了。那麼css的優先順序是如何的呢？
在css中，基本選擇器諸如 id選擇器，class類選擇器，還有標籤選擇器。組合使用的時候，又有後代選擇器和群組選擇器。
語法：
id選擇器：#id
文字相關
類選擇器：.class
標籤選擇器：div, p span等。
文字
文字
群組選擇器：
文字
哈哈哈哈哈
選擇器的優先順序：
以下面的**為例
文字內容
執行結果後，文字是紅色的。也就是說 上面的css樣式覆蓋了下面的樣式。
出現這個結果的原因是 下面的優先順序不夠。
優先順序如何確定呢？
一般給定id選擇器的優先順序為100 class選擇器優先順序為 10 標籤選擇器優先順序為 1
當我們遇到諸如此類：
#mydiv p span .block
.block span
span a .red
.wrap
a #div
選擇器優先順序可以這麼算：
#mydiv p span .block 100+1+1+10 = 112
.block span 10+1 = 11
span a .red 100+1+10 = 111
.wrap 10
a 1
#div 100
優先順序不言而喻。
優先順序使用以上已經介紹清楚，那麼 如何根據情況選擇最適合的選擇器呢？
那麼瀏覽器是如何針對css選擇器來查詢元素的？
瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:
div#divbox p span.red
>s1 s2
s3 s4
如何讓自己的css樣式更加簡潔高效？
css高效的原理主要是減少瀏覽器的查詢
類選擇器前不用標籤選擇器 特例：多個標籤的類選擇器相同 但是要求樣式有些不一樣。
id選擇器前不用標籤選擇器。
如：
a .red
b .red
如：
#div p span .red應該使用：.red如：
#mydiv p span a替代：
.block
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...