HTML选择器

1. CSS：Cascading Style Sheet 层叠样式表

2. CSS选择器

1. 元素选择器 a{}
2. 类选择器 .link{}
3. ID选择器 #id{}
4. 通用（全局）选择器 *{}
5. 群组选择器 p1,a{}
6. 后代选择器 p em{}
7. 子元素（直接后代）选择器 p > em{}
8. 兄弟元素选择器 section > div + article{} 选中div相邻的第一个article
9. 通用兄弟选择器 section > div ~ article{} 选中div后所有article
10. 包含选择器 a[class~=“one”] class有包含one的就被选中
11. 开头选择器 a[class^=“one”] 以one开头的会被选中
12. 结尾选择器 a[class$=“one”] 以one结尾的会被选中
13. 包含选择器 a[class*=“one”] 包含one的会被选中
14. a[class|=“one”] 属性值为value或以value开头的元素
15. 组合选择器 [type=checkbox] + label{}
16. 否定选择器 :not(.link){}
17. 属性选择器 input[type=radio]{} a[href]{}
18. 伪类选择器
    1. 动态伪类
       1. 锚点伪类 :link :visited
       2. 用户行为伪类:active :focus（表单）
    2. UI元素状态伪类 :enabled :disabled :checked
    3. 链接伪类顺序 link > visited > hover > active
    4. hover必须置于link和visited后才有效
    5. active必须置于hover后才有效
    6. 伪类名称对大小写不敏感
19. 伪元素选择器 ::before{}

3. 选择器权重

1. ID选择器 +100
2. 类 伪类 属性 +10
3. 元素 伪元素 +1
4. 其它选择器 +0

4. ！important 优先级最高

.test{color:red!important;}

5. 元素属性优先级高

6. 相同权重，后写的生效

7. 不要滥用ID选择器