繼承：即子類元素繼承父類的樣式;
優先順序：是指不同類別樣式的權重比較;
層疊：是說當數量相同時，通過層疊(後者覆蓋前者)的樣式。
首先來看一下css選擇符(css選擇器)有哪些?
1.標籤選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class="head",class="head_logo")
3.id選擇器(如：id="name",id="name_txt")
4.全域性選擇器(如：*號)
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.後代選擇器 (如：#head .n** ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img 即具有相同樣式的標籤分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.偽類選擇器(如：就是鏈結樣式,a元素的偽類，4種不同的狀態：link、visited、hover、active。注意:必須將偽類寫在本身選擇器之後,並且是偽類也有順序link、visited、hover、active,就是lvha，這個叫愛恨原則，love/hate)
10.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)
選擇其 src 屬性值以 "https" 開頭的每個 元素。
[attribute$=value]
a[src$=".pdf"]
選擇其 src 屬性以 ".pdf" 結尾的所有 元素。
[attribute*=value]
a[src*="abc"]
選擇其 src 屬性中包含 "abc" 子串的每個 元素
11.子選擇器 (如：div>p ,帶大於號》)
12.css 相鄰兄弟選擇器器 (如：h1+p,帶加號+)
當兩個規則都作用到了同乙個html元素上時，如果定義的屬性有衝突，那麼應該用誰的值的，css有一套優先順序的定義。
不同級別時:
在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作為style屬性寫在元素內的樣式
id選擇器
類選擇器
標籤選擇器
萬用字元選擇器
瀏覽器自定義或繼承
總結排序：!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
同一級別:
選擇器類別
說明權重表示
權值表示
行內樣式
行內只有乙個 style = ""
（1.0.0.0）
1000
id選擇器
selector中使用了幾個id，即#的個數
（0.1.0.0）
100類選擇器
類,偽類,以及屬性的個數，如： .outerclass .buttonclass[type="button"]:hover{}
選擇器中有2個類,1個屬性,1個偽類(0.0.4.0)
（0.0.1.0）
10元素選擇器
偽元素和標籤元素的個數，如： p:first-child
選擇器中有乙個標籤元素p和乙個偽元素first-child
（0.0.0.1）
1注意:權值實際並不是按十進位制，用數字表示只是說明思想，一萬個class也不如乙個id權值高
例子:
doctype html根據選擇器中規則對應做加法，比較權值，從左到右進行比較，大的優先順序越高,如果權值相同那就後面的覆蓋前面的了>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>csstest
title
>
<
style
type
="text/css"
>
div.test
/*權重為
0011
*/.test.test2
/*權重為
0020
*/style
>
head
>
<
body
>
<
div
class
="test test2"
>
div>
body
>
html
>
之前有個面試官問我權重問題.題目如下:
doctype htmldiv是什麼顏色?>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>csstest
title
>
<
style
type
="text/css"
>
div.test
.test
style
>
head
>
<
body
>
<
div
class
="test test2"
>
div>
body
>
html
>
答案為黑色
div.test權重為0011, .test的權重為0010,所以顯示的是div.test的樣式.
注意:1.css選擇器的使用，應該盡量避免使用 !important 和 內聯樣式；id通常也是與class區分開使用，前者多用於js中的結點定位，後者多用於css選擇器;
2.css選擇器的解析原則是從右往左的,這樣的好處是盡早的過濾掉一些無關的樣式規則和元素 ;
3.不要再id選擇器前使用標籤名(id選擇是唯一的，加上標籤名相當於畫蛇添足);
4.盡量少使用層級關係；
5.使用類選擇器代替層級關係.
參考:
css 繼承，層疊，優先順序
1，繼承，父親黃種人，孩子也為黃種人 兒子繼承父親 父親為 color red 子元素，也為color red 子元素不要勞作就有了，子元素什麼有沒有做，我就有了父元素的值 2，但是 width，不叫繼承，叫可以獲取 子元素可以獲取父親的width 父親寬度為100px。子元素不寫寬度，那麼，照樣沒...
選擇器優先順序 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...