選擇器種類
嚴格來講，選擇器的種類可以分為三種：標籤名選擇器、類選擇器和id選擇器。而所謂的後代選擇器和群組選擇器只不過是對前三種選擇器的擴充套件應用。而 在標籤內寫入 style="" 的方式，應該是css的一種引入方式，而不是選擇器，因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起，所 以就有了5種或6種選擇器了。
三種基本的選擇器型別
語法如下：
◆標籤名選擇器，如：p{}，即直接使用html標籤作為選擇器。
◆類選擇器，如.polaris{}。
◆id選擇器，如#polaris{}。
偽類，屬性選擇器特指度等同於類
偽元素特指度等同於標籤名選擇器
擴充套件選擇器
◆後代選擇器，如 .polaris span img{}，後代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標籤。
◆群組選擇器，如 div,span,img{}，群組選擇器實際上是對css的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多**。
特指度-優先順序計算
我們需要引入乙個概念——特指度（specificity）。特指度表示乙個css選擇器表示式的重要程度，可以通過乙個公式來計算出乙個數值，數越大，越重要。
這個計算叫做「i-c-e」計算公式，
i——id；
c——class；
e——element；
即，針對乙個css選擇器表示式，遇到乙個id就往特指度數值中加100，遇到乙個class就往特指度數值中加10，遇到乙個element就往特指度數值中加1。
這裡寫描述
還有乙個重點要注意：!important 優先順序最高，高於上面一切。* 選擇器最低，低於一切。
後代選擇器的定位原則
在這裡介紹一下對於後代選擇器，瀏覽器是如何查詢元素的呢？
瀏覽器css匹配不是從左到右進行查詢，而是從右到左進行查詢。比如div#divbox p span.red，瀏覽器的查詢順序如下：先查詢html中所有 class='red' 的 span 元素，找到後，再查詢其父輩元素中是否有 p 元素，再判斷 p 的父元素中是否有 id 為 divbox 的 div 元素，如果都存在則匹配上。
瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。
簡潔、高效的css
所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢，下面列出一些我們常見的寫css犯一些低效錯誤：
◆不要在id選擇器前使用標籤名
一般寫法：div#divbox
更好寫法：#divbox
解釋： 因為id選擇器是唯一的，加上 div 反而增加不必要的匹配。
◆不要再class選擇器前使用標籤名
一般寫法：span.red
更好寫法：.red
解釋：同第一條，但如果你定義了多個.red，而且在不同的元素下是樣式不一樣，則不能去掉，比如你css檔案中定義如下：
p.red
span.red
如果是這樣定義的就不要去掉，去掉後就會混淆，不過建議最好不要這樣寫。
◆盡量少使用層級關係
一般寫法：#divbox p .red
更好寫法：.red
◆使用class代替層級關係
一般寫法：#divbox ul li a
更好寫法：.block
css 優先順序
當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...
css優先順序
今天在使用公司內部框架的時候，發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器，可是卻不起作用。使用f12檢視，發現是當前的樣式沒有起作用，而是被框架生成的樣式代替掉了。當然，寫內嵌的樣式肯定是沒問題。可問題就是，我明明在頁面內部寫了樣式，按照常理，應該是我手寫的類選擇器的優先順序...
css優先順序
css樣式分為 外部樣式，內部樣式，內聯樣式 選擇器優先權 1.內聯樣式表的權值最高 1000 2.id 選擇器的權值為 100 3.class 類選擇器的權值為 10 4.html 標籤選擇器的權值為 1 css 優先順序法則 a 選擇器都有乙個權值，權值越大越優先 b 當權值相等時，後出現的樣式...