CSS三大特性—— 繼承烘嘱、 優(yōu)先級和層疊昆禽。
繼承：即子類元素繼承父類的樣式;
優(yōu)先級：是指不同類別樣式的權(quán)重比較;
層疊：是說當數(shù)量相同時蝗蛙，通過層疊(后者覆蓋前者)的樣式。
1.CSS選擇器分類
- 全局選擇器（通配符*）
- 標簽選擇器（body醉鳖，div捡硅，p，ul盗棵，li）
- 類選擇器（.）
- ID選擇器（#）
- 組合選擇器（.head .head_loge壮韭，兩選擇器之間用空格隔開）
- 后代選擇器（#head .nav li ul，從父級到子孫集的選擇器）
- 子選擇器（div>p）
- 群組選擇器（div纹因，span喷屋，img{color：red；}瞭恰，即將具有相同樣式的標簽分組顯示）
- 繼承選擇器（div p屯曹，兩選擇器用空格鍵分開）
- 偽類選擇器（鏈接樣式a元素的偽類：:link(未被訪問)，:visited(已訪問)惊畏，:active(被選擇)恶耽，:hover(當鼠標懸停在鏈接上)）
- 字符串匹配的屬性選擇符（^(開始)，$(中間)颜启，*(結(jié)尾)）
- css相鄰兄弟選擇器（如h1+p）
2.CSS選擇器優(yōu)先級
不同級別：偷俭！important（在樣式屬性后不加“;”，在!important后加分號）>行內(nèi)樣式>ID選擇器>Class選擇器>標簽>通配符
相同級別：
（1）同一級別中后寫的會覆蓋先寫的樣式
（2）選擇器約分
**CSS優(yōu)先級：是由四個級別和各級別出現(xiàn)次數(shù)決定的
四個級別：行內(nèi)樣式缰盏，ID選擇器涌萤，Class選擇器，標簽
每個規(guī)則對應一個初始值0,0,0,0
若是 行內(nèi)選擇符乳规，則加1形葬、0、0暮的、0
若是 ID選擇符笙以，則加0、1冻辩、0猖腕、0
若是 類選擇符/屬性選擇符/偽類選擇符，則分別加0恨闪、0倘感、1、0
若是 元素選擇符/偽元素選擇符咙咽，則分別加0老玛、0、0、1
算法：將每條規(guī)則中蜡豹，選擇符對應的數(shù)相加后得到的”四位數(shù)“麸粮，從左到右進行比較，大的優(yōu)先級越高镜廉。**
注意：
①弄诲、!important的優(yōu)先級是最高的，但出現(xiàn)沖突時則需比較”四位數(shù)“;
②娇唯、優(yōu)先級相同時齐遵，則采用就近原則，選擇最后出現(xiàn)的樣式;
③塔插、繼承得來的屬性梗摇，其優(yōu)先級最低;
!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
css選擇器使用強烈建議采用低權(quán)重原則，利于充分發(fā)揮css的繼承性佑淀，復用性留美，模塊化、組件化伸刃。
3.CSS 選擇器解析原則
從右向左進行解析，切記７瓯丁Ｅ趼！能夠減少節(jié)點的便利较雕。
如果從左到右一層一層的篩選：首先會看到很多div被篩選出來碉哑，接下來篩選每一個div，首先在#div2中看到了class=p1的p亮蒋，此時我們很是高興扣典，感覺勝利就在前方了，再看class=p1的p標簽的子元素慎玖，看到第一個很是失望贮尖，不符合span.red，不要急趁怔，再看下一個又不符合規(guī)則湿硝，小小的安慰自己一下，最后一個含有class润努，說不定就是了关斜，結(jié)果，結(jié)果居然class=green铺浇，此時火冒三丈痢畜，就差最后一層，怎奈居然出現(xiàn)這種事，無奈之下只能在返回#div2繼續(xù)匹配它的子元素....
但如果我們換一個思路丁稀，首先匹配class=red 的 span吼拥，我們找到2個符合條件的的span然后在和上一次比對，我們需要的是span.red 是 p.p1的下屬元素二驰，此時就發(fā)現(xiàn)剛才篩選出來的第二個 span 元素不符合要求扔罪，再來匹配第一個，層層向上匹配桶雀，最終匹配成功矿酵。
4.簡潔，高效的CSS
所謂高效就是讓瀏覽器查找更少的元素標簽來確定匹配的style元素矗积。
1.不要再ID選擇器前使用標簽名
解釋：ID選擇是唯一的全肮，加上標簽名相當于畫蛇添足了，沒必要棘捣。
2.不要在類選擇器前使用標簽名
解釋：如果沒有相同的名字出現(xiàn)就是沒必要辜腺，但是如果存在多個相同名字的類選擇器則有必要添加標簽名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
3.盡量少使用層級關(guān)系；
#divclass p.colclass{color:red;}改為 .colclass{color:red;}
4.使用類選擇器代替層級關(guān)系（如上）
