选择器

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。

1. id选择器

id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素。

权重值：100

#id{
    
}

2. class选择器

选择拥有该类别的多个元素。

权重值：10

.class{
    
}

3. 标签选择器

根据标签名称，选择对应的所有标签。

权重值：1

4. 通用选择器

针对页面上的所有标签都生效

权重值：0

5. 组合选择器

6. 属性选择器

M[attr] {}

=：完全匹配

*=：部分匹配

^=：

$=：

M[class][id]：

7. 伪类选择器

M:伪类{
}
M:link{
    访问前样式（只能加给a标签）
}
M:visited{
    访问后样式（只能加给a标签）
}
M:hover{
    鼠标移入时的样式（可以给所有标签加）
}
M:active{
    鼠标按下时的样式（可以给所有标签加）
}
注：
如果四个伪类都生效，顺序是LVHA
一般网站都只设置a{} a:hover{}

div:after{
    content: "kobe";
}
div:before{
    content: "kobe";
}
:checked{
    
}
:disabled{
    
}
:focus{
    
}

8. 结构性伪类选择器

li:nth-of-type(3){
    background: red;
}
角标从1开始，1表示第一项，2表示第二项，n表示0到无穷大

first-of-type
last-of-type
only-of-type

nth-child
first-child
last-child

CSS 优先级

行内样式（1000） > ID 选择器（100） > 类选择器（10） > 标签选择器（1） > 通用选择器（0）

（1）同一元素引用了多个样式时，排在后面的样式属性的优先级高；

（2）样式选择器的类型不同时，优先级顺序为：id 选择器> class 选择器> 标签选择器；

（3）标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；

（4）带有 !important 标记的样式属性的优先级最高；

（5）样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户

自定义样式> 浏览器默认样式