CSS選擇器

1.瞭解CSS選擇器

CSS選擇器有很多，大家也都不陌生。那先系統的介紹一下：

1.1 *萬用字元選擇器

經常用於css reset，清理標籤的預設樣式，一般不提倡直接使用，主要是會匹配所有標籤，相當耗資源。

1.2 #id ID選擇器
優先順序高 但重用性較差

1.3 .class 類選擇器
可以選擇擁有類特性的多種元素 。 最常使用的一種了

1.4 X 元素選擇器

1.5 X Y 後代選擇器
用於選取X元素下子元素Y，要留意的是，這種方式的選擇器將選取其下所有匹配的子元素，無視層級

1.6 X>Y 子選擇器

1.7 X[ title=’ ’ ] 屬性選擇器
不僅僅適用於title,也可以是其他屬性

1.8 偽類選擇器
偽類選擇器有很多 主要的形式是 X： … 。
最常見的有 X：after / a:link、a:visted、a:hover、a:active等等

2. CSS選擇器的效率區別

CSS選擇器具有高效的繼承性，引用Steve Souders的話， CSS選擇器效率從高到低的排序如下：
1.ID選擇器 比如#header
2.類選擇器 比如.promo
3.元素選擇器 比如 div
4.兄弟選擇器 比如 h2 + p
5.子選擇器 比如 li > ul
6.後代選擇器 比如 ul a 7. 通用選擇器 比如 *
7.屬性選擇器 比如 type = “text”
8.偽-比如 a:hover

3.CSS選擇器中應儘量避免的寫法

首先請閱讀 編寫高效的CSS選擇器。這篇文章就像是在欣賞一朵花一樣，講解的十分精細和生動。

3.1 拿其中的一點來說：
例如有 .container ul li{ } ，瀏覽器去尋找的方式是從右到左的，即 先找到li標籤 -> 找到被ul包裹的li標籤 -> 找到被.container包裹的ul標籤的li標籤  。所以從這點出發，我們不可過度限制選擇器。我們可以去掉一些不必要的選擇 ，例如:
     將.container ul li 寫成 .container li。因為li 標籤一定在ul中。
     當.content 一定在 .main中時 。將.container .main .content 寫成 .container .content

4. 總結

建議還是看幾位大牛的文章，個人寫的水平太差。CSS選擇器的使用還是瞭解一下，對以後還是很有幫助的。