##本文主要講 css3 中三中不常用的選擇器的精闢用法（e~f，e+f，e:not(selector)）：
####（1）e~f (選擇e元素後面的所有兄弟元素f)
* 通用兄弟元素選擇器型別。
* 選擇匹配f的所有元素，且匹配元素位於匹配e的元素後面。
* 在dom結構樹中，e和f所匹配的元素應該在同一級結構上。
需求：根據後台傳過來的 li 標籤個數，動態渲染 li 標籤的寬度（flex都無法實現的效果）；
乙個 li ： 寬度佔100%
兩個 li ： 寬度各佔50%
三個 li ： 寬度各佔33.333%
四個 li ： 寬度各佔25%
五個 li ： 寬度各佔20%
六個 li ： 寬度各佔16.66%
七個 li ： 前六個各佔16.66%，第七個換行且寬度佔16.66%
注意：可以根據需求改變一行需要渲染li的個數，和寬度。如果一行只需要三列，則 li:nth-last-child(4) 及之後的**就不要在再寫了。
:nth-last-child(n) 選擇列表的倒數第n個元素
:nth-last-child(4) 選擇列表的倒數第4個元素
再結合兄弟選擇器
**：
ul li
li:nth-last-child(1),
li:nth-last-child(1) ~ li
li:nth-last-child(2),
li:nth-last-child(2) ~ li
li:nth-last-child(3),
li:nth-last-child(3) ~ li
li:nth-last-child(4),
li:nth-last-child(4) ~ li
li:nth-last-child(5),
li:nth-last-child(5) ~ li
li:nth-last-child(6),
li:nth-last-child(6) ~ li
* 通用兄弟元素選擇器型別。
* 選擇匹配f的所有元素，且匹配元素位於匹配e的元素後面。
* 在dom結構樹中，e和f所匹配的元素應該在同一級結構上。
**：
匹配所有不匹配簡單選擇符selector的元素e
匹配所有不匹配簡單選擇符selector的元素e
//沒有粉色
匹配所有不匹配簡單選擇符selector的元素e
匹配所有不匹配簡單選擇符selector的元素e
匹配所有不匹配簡單選擇符selector的元素e
匹配所有不匹配簡單選擇符selector的元素e
//沒有粉色
* 相鄰兄弟選擇器
* 選擇匹配f的元素
* 且該元素為所匹配e元素後面相鄰的位置。
**:
這是乙個文字段落
這是乙個文字段落
//color:blue;這是乙個文字段落
這是乙個文字段落
這是乙個文字段落
//color: blue;
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
前端應該知道的CSS3 選擇器
將所有margin和padding歸零，不建議使用，增加瀏覽器負擔 適用於子選擇器 選擇 container層中的子元素 container ie firefox chrome safari opera6 id選擇器不能重複使用，盡量避免使用 containerie firefox chrome s...