HTML&CSS————CSS常用选择器及优先级

选择器优先级

内联样式（1000）> id选择器（100）> 类和伪类选择器（10） > 元素选择器（1）>通配 * 选择器（0）> 继承的样式

一、元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素。

标签名{
    ...
}

二、id选择器

作用：通过元素的id属性选中唯一的一个元素。id属性在一个页面中是唯一的。

<p id="p_1">床前明月光</p>
<p id="p_2">疑是地上霜</p>

#id属性值{
     ... 
}

 三、类选择器（class选择器）

作用：通过元素的class属性，选择一组元素。class属性在页面中不唯一，且一个元素可以有多个class（空格隔开多个class）。

<p class="p1 class1 class2">锄禾日当午</p>
<p class="p1 class1">汗滴禾下土</p>

.class属性值{
    ...
}

四、并集选择器（选择器分组）

作用：通过并集选择器可以同时选中多个选择器对应的元素。

选择器1, 选择器2, 选择器3{
    ...
}

比如现在有三个选择器，id选择器：p_1{ ... } ，class选择器：.p2{ ... }，元素选择器：h1{ ... }，那么选择器分组语法如下：

#p_1, .p2, h1{
    ...
}

五、交集选择器（复合选择器）

作用：选择同时满足多个选择器的元素。

选择器1选择器2选择器3 {
    ...
}

和并集选择器区分，并集选择器可以理解为“只要满足其中一种即可”是一种“或”的关系；而交集选择器是“必须满足所有选择器才可以”是一种“与”的关系。注意在书写上，并集选择器多个选择器之间用逗号隔开，交集选择器之间紧密相连，没有任何分隔符。另外，因为id选择器已经可以唯一确定一个元素，因此，id选择器不建议使用复合选择器。

六、通配选择器

作用：可以选择页面中的所有元素。

* {
    ...
}

七、后代元素选择器

作用：选中指定元素的指定后代元素。

祖先元素 后代元素 {
    ...
}

八、子元素选择器

作用：选中指定父元素的指定子元素。

父元素 > 子元素 {
    ...
}

九、属性选择器

作用：可以根据元素中的属性或属性值来选取指定元素。

<p title="text">一段文字</p>

/* [属性名] 根据属性名选取*/
p[title]{
    ...
}
/* [属性名="属性值"] 根据属性值选取*/
p[title="text"]{
    ...
}
/* [属性名^="xx"] 选取以xx为开头的属性值*/
p[title^="te"]{
    ...
}
/* [属性名$="xx"] 选取以xx结尾的属性值*/
p[title$="xt"]{
    ...
}
/* [属性名*="x"] 选取属性值中有 x 的元素*/
p[title*="x"]{
    ...
}