mdn-css选择器

selector lists

• 选择器用逗号分隔
• 换行更易读
• 只要有一个错，就全都不生效

选择器类型

• 标签选择器

1. 全选选择器（*），让代码更易读

article *:first-child {}

• 类选择器(class)
• id选择器
• 属性选择器

1. 子串匹配选择器
2. 大小写不敏感,在闭合括号的前面加i

li[class^="a" i] {
    color: red;
}

• 伪类选择器

1. 有利于代码的维护
2. user-action伪类

• 伪标签选择器

1. ::before和::after生成内容

.box::before {
    content: "This should show before the other content."
}   
<p class="box">Content in the box in my HTML page.</p>

2. 用来加箭头
3. 生成空字符串

.box::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
    border: 1px solid black;
}  

• 组合选择器（combinators)

1. 后代选择器 （空格）
2. 子选择器 （>）
3. 相邻兄弟选择器（+）
4. 全部兄弟（~）

因为id选择器的优先级太高（100），所以比较爱用类选择器（10）
组合选择器的优先级也比较高,复用性不太好