『壹』 !important，權重問題
1.！important作用：
用來提升某個 直接選中標簽的選擇器 中某個屬性的優先順序的，可以將 被指定的屬性 的優先順序提升為最高
2.優先順序的權重
作用：當多個選擇器混合在一起使用時，我們可以通過計算權重來判斷誰的優先順序最高
誰的id最多誰的優先順序最高
id個數一樣，再看類名個數，類名個數
類名個數一樣，再看標簽的個數
要是都一樣，誰在後面按照哪個來
『貳』 CSS選擇器的優先順序
通常我們可以將CSS的優先順序由高到低分為六組：
1、無條件優先的屬性只需要在屬性後面使用 !important 。它會覆蓋頁面內任何位置定義的元素樣式。當然，IE 6不支持這個屬性，於是它也成為一種hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的優先屬性是在html中給元素標簽加style。由於該方法會造成CSS的難以管理，所以不推薦使用。
3、第三級優先的屬性是由一個或多個id選擇器來定義的。例如 #id{margin:0;} 會覆蓋 .classname{margin:3px;}。
4、第四級的屬性由一個或多個 類選擇器、屬性選擇器、偽類選擇器定義。如 .classname{margin:3px;} 會覆蓋 div{margin:6px;}
5、第五級由一個或多個 類型選擇器定義。如 div{margin:6px;} 覆蓋 *{margin:10px;} 。
最低一級的選擇器是為一個通配選擇器，用*{margin:10px;}這樣的類型來定義。
另外，可以用一句極為簡單的話來描述CSS優先順序問題：當一個CSS選擇器擁有更多的高級別屬性時，它的優先順序就會比較高。如 #i100
*.c20 *.c10{} 的優先順序就會高於 #i100 *.c10 div p span em{}
，這是由於前者擁有一個第三級和兩個第四級的選擇器而後者第三級和第四級的選擇器各為一個，當然前者優先順序會比較高。
如果想學習和交流更多html 前端開發的技術 你可以來我們這個群：先寫下這三個數字：432，然後在寫下中間這三個數字：664，最後寫下的三個數字是：883，按照這個順序連起來，群就會出現。還有更多的技術資料，學習課程。
CSS選擇器是一個非常靈活的CSS屬性，優雅的使用它會使你的頁面代碼不再臃腫，而且還可以作為hack的妙用方法之一。
當比較多個相同級別的CSS選擇器優先順序時，它們定義的位置將決定一切。下面從位置上將CSS優先順序由高到低分為六級：
1、位於<head/>標簽里的<style/>中所定義的CSS擁有最高級的優先權。
2、第二級的優先屬性由位於 <style/>標簽中的 @import 引入樣式表所定義。
3、第三級的優先屬性由<link/>標簽所引入的樣式表定義。
4、第四級的優先屬性由<link/>標簽所引入的樣式表內的 @import 導入樣式表定義。
5、第五級優先的樣式有用戶設定。
最低級的優先權由瀏覽器默認。
理解了這些CSS優先順序問題後，也就不必苦惱於樣式定於中的此類問題了。
『叄』 CSS選擇器、優先順序以及!important知識總結
關於CSS選擇器，首先請看這里： CSS 選擇器參考手冊
通過以上，我們可以將CSS選擇器分為以下幾種：
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例：
說明：以下E表示元素，attr表示屬性，val表示屬性的值。
說明：以下E表示元素
示例：
示例：
示例：
示例：
E:not(s) ,匹配不符合當前選擇器的任何元素
示例：
E:target ,匹配文檔中特定"id"點擊後的效果
示例：
這里我們簡單討論下後代元素選擇器和子元素選擇器的區別
示例
CSS優先順序是指CSS樣式在瀏覽器中被解析的 先後順序 。
多重樣式（Mutiple Styles）：如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是多重樣式的使用情況。
一般情況下，（ 外部 樣式）External style sheet <（ 內部 樣式）Internal style sheet <（ 內聯 樣式）Inline style
例外 ：如果外部樣式放在內部樣式的後面，則外部樣式將會覆蓋內部樣式。
示例：
給不同的選擇器分配不同的權值
解釋：
示例
結果：標簽內的數據顯示為藍色。
比較樣式的優先順序是，只需統計不同選擇器的個數，然後與對應的權值相乘即可。根據結果便可得出優先順序。
看到這里，有些同學是不是對!important有點迷惑呀 為什麼有了它，就優先順序最高吶 下面我們再來詳細講一講!important~
!important 是CSS1就定義的語法，作用是提高指定樣式的應用優先權。
語法格式： {cssRule !important} ，即寫在定義的最後面，例如： box { color: red !important}
聲明了 !important 的樣式，具有最高的優先順序，相當於寫在最下面（最後定義）
IE 6.0 不完全 支持!important
IE支持重定義中的!important，例如：
你將會發現定義了樣式 class="yuanxin" 時，在IE下，字體顯示為紅色（#e00）。
但不支持同一定義中的 !important 。例如：
此時在IE6下不支持，你將會發現定義了樣式 class="yuanxin" 時，字體顯示為黑色（#000）。
解釋 ：
important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里)，IE 6.0認為!important優先順序較高，否則當含!important的樣式屬性被同一個{}里的樣式覆蓋時，IE 6.0認為!important較低!
再舉一個例子：
因為IE 6.0一直都不完全支持這個語法，而其他的瀏覽器都支持。因此我們就可以利用這一點來分別利用!important，我們可以針對IE和非IE瀏覽器設置不同的樣式，只要在非IE瀏覽器樣式的後面加上!important。
完。
總結內容參考以下：
w3school_CSS 選擇器參考手冊
阮一峰_CSS選擇器筆記
css選擇器優先順序深入理解
CSS 的優先順序機制[總結]
十分感謝你們的分享 n(*≧▽≦*)n
註：原文章首發於： CSS選擇器、優先順序以及!important知識總結 ，現遷移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
『肆』 css選擇器的優先順序
就是根據定義的前後順序來的，後面的優先於前面的
比如：
.aaa{width:100px;}
.aaa{width:200px;}
.bbb{width:300px;}
<div class="aaa bbb"></div>
這個div只會引用到最後一個width:300px
『伍』 6.前端選擇器的優先順序
當使用不同的選擇器，選中同一個元素時並且設置相同的樣式時，這時樣式之間產生了沖突，最終到底採用哪個選擇器定義的樣式，由選擇器的優先順序（權重）決定優先順序高的優先顯示。
當選擇器中包含多種選擇器時，需要將多種選擇器的優先順序相加然後在比較，但是注意，選擇器優先順序計算不會超過他的最大的數量級，如果選擇器的優先順序一樣，則使用靠後的樣式。
div , p , #p1 , .hello{}
可以在樣式的最後，添加一個 !important ，則此時該樣式將會獲得一個最高的優先順序，將會優先於所有的樣式顯示甚至超過內聯樣式，但是在開發中盡量避免使用!important
『陸』 css選擇器有哪些各種選擇器優先順序大小順序
CSS選擇器如下：
1.
標簽名選擇器
div
{
color：Red;}
/即頁面中的各個標簽名的css樣式
2.類選擇器
.divClass
{color:Red;}
/即定義的每個標簽的class
中的css樣式
3.ID選擇器
#myDiv
{color:Red;}
/即頁面中的標簽的id
4.後代選擇器（類選擇器的後代選擇器）
.divClass
span
{
color:Red;}
/即多個選擇器以逗號的格式分隔
命名找到准確的標簽
5.群組選擇器
div,span,img
{color:Red}
/即具有相同樣式的標簽分組顯示
選擇器的優先順序
1.最高優先順序是
(直接在標簽中的設置樣式，假設級別為1000)
2.次優先順序是（ID選擇器
,假設級別為100）
#myDiv{color:Red;}
3.其次優先順序是（類選擇器，假設級別為10）
.divClass{color:Red;}
4.最後優先順序是
（標簽選擇器，假設級別是
1）
div{color:Red;}
5.那麼後代選擇器的優先順序就可以計算了啊
比如
.divClass
span
{
color:Red;}
優先順序別就是：10+1=11
『柒』 css選擇器層疊、優先順序、樣式沖突
上面是一個簡單的html案例，對於同一個元素應用多個規則時，規則中可能包含沖突的聲明，在style樣式表中包含了三個規則集，每一個規則給它指定了不同的字體顏色。標題不可能同時擁有三種顏色，所以最終的效果是顯示的紅色(red)。
瀏覽器如何知道並解決聲明沖突，這其中層疊指的就是這一系列規則。它決定了如何解決沖突，是css語言的基礎。層疊會依據三種條件解決沖突。
疊層的規則是按照這種順序來考慮的，看下圖
這些規則讓瀏覽器可以以預測的方式解決css樣式規則中的沖突。
你添加到網頁里的樣式表並不是瀏覽器唯一使用的樣式表，還有其他類型或來源的樣式表。你的樣式表屬於作者樣式表，除此之外還有用戶代理樣式表，即瀏覽器默認的樣式。用戶代理樣式表優先順序低，你的樣式會覆蓋它們。
用戶代理樣式表在不同瀏覽器上稍有差異，但是大體上是在做相同的事情：為標題 <h1> 到 <h6> 和段落 <p> 添加上下邊距，為列表 <ol>,<ul> 添加左側內邊距，為鏈接添加顏色，為元素添加各種默認字型大小。
瀏覽器應用了用戶代理樣式表後才會應用你的樣式表，即作者樣式表，你指定的聲明會覆蓋用戶代理樣式表裡面的樣式，如果在html里鏈接了多個樣式表，那麼它們的來源都相同，即屬於作者樣式表。
用戶代理樣式表因為設置了用戶需要的樣式，所以不會做出一些超出預期的事情，當不喜歡默認樣式的時候，可以在自己的樣式表裡面設置別的樣式來覆蓋用戶代理樣式即可。
作為一個標準的前端打工仔，必定熟悉覆蓋代理樣式。這種做法實際上就是利用了層疊的樣式來源規則。你寫的樣式會覆蓋用戶代理樣式，因為來源不同。
樣式來源規則有一個例外，標記為重要 !important 的聲明。該聲明就會被標記為重要的聲明。
標記了 !important 的聲明會被當做更高優先順序的來源，因此總體的優先順序按照由高到低排列，如下所示：
如果無法用來源解決沖突聲明，瀏覽器會嘗試檢查它們的優先順序。理解優先順序很重要，因為作者樣式幾乎都是屬於優先順序的范圍，日常工作接觸的大部分開發樣式是來自於同源，如果不理解優先順序，寫出來的css樣式會被坑的很慘。
瀏覽器將優先順序分為兩部分：HTML的行內樣式和選擇器的樣式。
如果HTML的style屬性寫樣式，這個聲明只會作用域當前元素。實際上行內元素屬於「帶作用域」的聲明，它會覆蓋任何來自樣式表或<style>標簽的樣式。行內樣式沒有選擇器，因為它們直接作用於所在的元素。
上面就是一個行內樣式，設置了顏色color為黃色yellow。
如果你希望在樣式表中覆蓋行內樣式的聲明，需要在樣式表中對應標簽下的聲明後添加 !importanta ，這樣能夠將它提升到一個更高優先順序來源。但如果行內樣式也被標記為 !imortant 那就無法覆蓋它了。最好不要在行內使用 !important ，而是只在樣式表中使用 !important 。
優先順序的第二部分是由選擇器優先順序決定。比如，有兩個類名的選擇器比只有一個類名的選擇器優先順序更高。具體可以看下面的案例。
通過比較選擇器類型來決定哪個選擇器優先值最高。
上面的樣式表中最終顯示的color顏色值為紅色(red)。
一個常用的表示優先順序的方式是用數組形式來標記，通常用都好隔開每個數。比如「1，2，3」表示用1個id、2個類、2個標簽組成。優先順序最高的id列為第一位，緊接著是類，最後是標簽。
我們可以通過下面的表格來查看各種選擇器和對應的優先順序。
現在，通過比較數值就能快速明確決定哪個優先順序更高。所以上面的順序是"1,0,0">"0,2,0">"0,1,3">"0,0,4"。而優先順序低的樣式表會被優先順序高的樣式表給覆蓋。
我們日常開發不建議某個元素的樣式表寫過長的標簽名和類名連體。一般只要能夠區分優先順序即可。
疊層的第三步，也是最後一步，是源碼順序。如果兩個聲明的來源和優先順序相同，其中一個聲明在樣式表中出現較晚，或者位於頁面較晚引入的樣式表中，則該聲明勝出。
在上面方法中，選擇器優先順序相同，都是(0,1,1)，最終瀏覽器呈現的顏色color是灰色gray。
『捌』 關於CSS後代選擇器 與 優先順序的問題
不是優先順序的問題
style中div#blue 和div#red 以及限定了style的應用范圍
前者只能用在id為blue的div中，後者只能用在id為red的div中
所以會一個顯示藍色，一個顯示紅色
『玖』 為什麼css選擇器是對的卻找不到元素
1、先確保代碼沒有錯別字；
2、提升這個選擇器的優先順序，排除掉優先順序不夠高的可能；
3、這個選擇器的書寫一定要確保在英文輸入狀態下，包括空格；
4、檢查css中在這個選擇器的前面代碼有沒有輸入錯誤，如：有其他字元在大括弧的外面
『拾』 網頁開發的時候，怎麼合理的選擇用選擇器
在網頁實現中，如何合理的選用「三種基本選擇器」呢？
1、在此強烈推薦新手使用「類名選擇器」。之所以選擇「類名選擇器」，主要原因在於：類名選擇器可以同時選擇多個元素，類似的元素可以使用同一個類名，比ID選擇器操作起來更靈活；由於類名選擇器必須定義，只有定義類名的標簽才能夠應用樣式，並不會對網頁中其他元素造成不必要的影響。
2、標簽名選擇器，由於其選擇范圍過廣，會導致網頁當中所有的同種類型標簽都會被選中，此時很容易造成樣式影響。不推薦使用。
3、ID選擇器，優先順序比較高，並且只能夠選擇一個，適合其使用的「環境」並不多。另外，ID選擇器通常是給原生JavaScript預留，一旦看到ID選擇器，就能夠想「在這里應該是有JS功能存在的」。 不推薦使用。