css3新增選擇器

• 2019 年 10 月 4 日
• 筆記

一、css3之前的選擇器

1. ID選擇器
2. 類選擇器
3. 包含選擇器(E F)
4. 偽類選擇器（:link,visited,hover,active,focus,first-child）
5. 偽元素選擇器（::first-line,first-letter,before,after）
6. 通配選擇器(.)
7. 屬性選擇器(foo[name='martin'])
8. 子包含選擇器(E>F)
9. 相鄰兄弟選擇器(E+F)

二、css3新增選擇器

新增屬性選擇器：

1. E[foo^='bar'] 匹配E元素，該元素包含foo屬性，且foo屬性值以bar開頭
2. E[foo$='bar'] 匹配E元素，該元素包含foo屬性，且foo屬性值以bar結尾
3. E[foo*='bar'] 匹配E元素，該元素包含foo屬性，且foo屬性值包含bar字元串

新增結構偽類選擇器：

1. E:root 匹配文檔所在的根元素
2. E:nth-child(n) 匹配E所在父元素第n個匹配E的元素，非E的子元素也參與排序，若第n個子元素不是E元素，則該語句沒有效果（注意這裡的n從1開始）
3. E:nth-last-child(n) 匹配E所在父元素倒數第n個匹配E的元素
4. E:nth-of-type(n) 匹配E所在父元素第n個匹配E的元素，非E的子元素不參與排序(n同樣是從1開始）注意區別nth-child(n)
5. E:last-child
6. E:first-of-type
7. E:last-of-type
8. E:only-child
9. E:only-of-type
10. E:empty