標籤名選擇器，e.g. div{}，即直接使用html標籤作為選擇器。
類選擇器，e.g. .p{}，class作為選擇器。
id選擇器，e.g. #id{}，id作為選擇器。
後代選擇器，e.g. .p span img{}，後代選擇器就是使用多個選擇器加以空格隔開來找到具體要控制的標籤。
群組選擇器，e.g. div,span,img{}，群組選擇器是對css的一種簡化寫法，把有相同屬性值的不同選擇器以逗號隔開，省了很多**。
1表示標籤名選擇器的優先順序；
10表示類選擇器的優先順序；
100表示id選擇器的優先順序；
選擇器指向的越準確，它的優先順序累加值就越高。
.demo
/*優先順序 10*/
.demo
p /*優先順序 10+1*/
p /*優先順序 1*/
pspan
/*優先順序 1+1*/
.pspan
/*優先順序 10+1*/
.demo
.pspan
/*優先順序 10+10+1*/
.demo
pspan
/*優先順序 10+1+1*/
style>
class="demo">
class="p">
span1span>
p>
span2span>
p>
div>
style="color:red">qq_lidiv>優先順序選擇，是在同一標籤/類/id上進行比較
#demo /!*優先順序 100*!/
#demo p /!*優先順序 100+1*!/
首先介紹瀏覽器解析css後代選擇器的規則：
瀏覽器css匹配並不是從左到右進行查詢，而是從右到左進行查詢。e.g.
div
#box
pspan
.red
先查詢html中所有class=』red』的span元素，找到後;
再查詢其父輩元 素中是否有p元素;
再判斷p的父元素中是否有id為divbox的div元素，如果都存在則匹配上。
因此，依照瀏覽器查詢規則，編寫css**時應盡量按照下面的方式：
a. 準確的選到要控制的標籤；
b. 使用最合理優先順序的選擇器；
c. html和css**盡量簡潔美觀。通常：
最常用的選擇器是類選擇器。
li、td、dd等經常大量連續出現，並且樣式相同或者相類似的標籤，我們採用類選擇器跟標籤名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。
極少的情況下會用id選擇器，當然很多前端開發人員喜歡header，footer，banner，conntent設定成id選擇器的，因為相同的樣式在乙個頁面裡不可能有第二次。
1、不要在id選擇器前使用標籤名
複雜方式：div#box
簡潔方式：#box
原因： id選擇器是唯一的，加上div反而增加不必要的匹配。
複雜方式：span.red
簡潔方式：.red
原因：同第一條，但如果定義了多個.red，而且在不同的元素下是樣式不一致，則不能去掉，比如你css檔案中定義如下：
p.red
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫
複雜方式：#box p .red
簡潔方式：.red{}
複雜方式：#box ul li a
簡潔方式：.block
這樣的方式，還可以在不同的位置復用block 類，減少css**冗餘。
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS 選擇器優先順序
css優先順序包含四個級別 文內選擇器，id選擇器，class選擇器，元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...
css選擇器優先順序
css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式，id選擇符，class類選擇符，元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵，然後繼承的權重很低，比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1，0，0，0，始終高於外...