[分享]Css元素选择器及优先级

CSS是前端开发中不可或缺的重要技术之一，其中元素选择器是最常见的一种选择器。在CSS中，元素选择器指的是通过HTML标签名来获取元素样式的选择器。下面我们就来了解一下CSS元素选择器及其优先级。 /...

CSS是前端开发中不可或缺的重要技术之一，其中元素选择器是最常见的一种选择器。在CSS中，元素选择器指的是通过HTML标签名来获取元素样式的选择器。下面我们就来了解一下CSS元素选择器及其优先级。

/* 用法：选择html中所有的 p 标签 */
p {
  color: red;
  font-size: 16px;
} 

如上述代码所示，我们通过选择器“p”来选中HTML中所有的p标签，并设置字体颜色为红色，字体大小为16px。此时我们可以将CSS代码写在html文件的标签中的，也可以写在外部的CSS文件中。在优先级方面，如果有多个选择器同时对同一元素设置不同的样式，那么就要根据选择器的优先级来判断哪个样式会被应用。以下是选择器优先级的计算：

优先级的计算是根据选择器的组成进行的，有三个部分，分别是：

1. 样式后缀（!important）：优先级最高，可以忽略计算中的其他两项
2. ID选择器：优先级第二高，可以覆盖类选择器、标签选择器及通配选择器
3. 类型选择器、类选择器、属性选择器、伪类选择器、通配选择器：优先级最低，如果没有其他选择器，则使用通配选择器的样式

如果优先级相同，则后者的规则会覆盖前者的规则。例如以下代码：

/* 用法：选择 ID 为 demo 的元素，字体颜色为黑色 */
#demo {
  color: black;
}
/* 用法：选择类为 red 的元素 ，字体颜色为红色 */
.red {
  color: red;
}
/* 用法：选择标签为 p 的元素，字体颜色为蓝色 */
p {
  color: blue;
} 

如果我们将以下代码写在HTML文件中，则ID为demo的字体颜色为黑色，类为red的字体颜色为红色，其余p标签字体颜色为蓝色。

这就是CSS元素选择器及优先级的基本知识，了解这些知识可以帮助我们更好地编辑HTML页面的样式。同时，我们也可以自己动手尝试编写不同选择器的组合，以达到预期的效果。