CSS 选择器优先级详解及实例演示

在CSS样式设计中,不同的选择器具有不同的优先级,当多个样式应用于同一元素时,优先级较高的规则将覆盖优先级较低的规则。以下是对CSS选择器优先级的详细说明,并通过实例进行演示:

1. 内联样式 (Inline Styles)

内联样式直接写在HTML元素的style属性中,其优先级最高,权重为 1000

示例:

html 复制代码
<p style="color: red;">这段文本将显示为红色</p>

即使存在其他定义颜色的选择器,由于内联样式的高优先级,该段文本仍会显示为红色。

2. ID 选择器 (#id)

ID选择器用于指定唯一元素,其权重为 100

示例:

css 复制代码
#uniqueId {
  color: blue;
}
html 复制代码
<p id="uniqueId">此文本将显示为蓝色</p>

尽管有其他可能影响文本颜色的类或标签选择器,但ID选择器的优先级更高,因此文本颜色为蓝色。

3. 类选择器、伪类选择器以及属性选择器 (.class, :hover, [attr])

这些选择器的权重相同,均为 10

  • 类选择器:
css 复制代码
.highlight {
  color: green;
}
html 复制代码
<p class="highlight">此文本将显示为绿色</p>
  • 伪类选择器:
css 复制代码
a:hover {
  text-decoration: underline;
}
  • 属性选择器:
css 复制代码
[target="_blank"] {
  color: orange;
}
html 复制代码
<a href="#" target="_blank">此链接在鼠标悬停时会下划线且颜色为橙色</a>

在这三种情况下,如果同时应用了多个选择器到同一个元素上,它们之间不会有优先级差异,而是根据样式表中的顺序决定(后定义的覆盖前面定义的)。

4. 标签选择器和伪元素选择器 (element, ::before, ::after)

标签选择器和伪元素选择器同样具有相同的权重,均为 1

  • 标签选择器:
css 复制代码
p {
  font-size: 16px;
}
  • 伪元素选择器:
css 复制代码
p::first-letter {
  font-weight: bold;
}

在以上示例中,无论标签选择器还是伪元素选择器,它们的样式均会被优先级更高的ID选择器、类选择器等所覆盖。

总结来说,在没有使用 !important 规则的情况下,CSS选择器的优先级排序如下:

  1. 内联样式
  2. ID 选择器
  3. 类选择器 = 伪类选择器 = 属性选择器
  4. 标签选择器 = 伪元素选择器

当不同优先级的选择器作用于同一元素时,优先级高的样式将生效;若优先级相同,则遵循样式表中声明的先后顺序,后者覆盖前者。

相关推荐
青山的青衫1 分钟前
【用homebrew配置nginx+配置前端项目与后端联调】Macbook M1(附一些homebrew操作)
运维·前端·nginx
二十雨辰4 分钟前
[作品集]-容易宝
java·开发语言·前端
恋猫de小郭22 分钟前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
Asort22 分钟前
JavaScript设计模式(二十一)——策略模式:灵活算法的艺术与实战
前端·javascript·设计模式
黑云压城After28 分钟前
3D魔方-Css实现方法
前端·css·3d
極光未晚1 小时前
乾坤微前端项目:前端处理后台分批次返回的 Markdown 流式数据
前端·vue.js·面试
用户6600676685391 小时前
用 CSS3 导演一场星际穿越:复刻“星球大战”经典片头
前端·css
程序员鱼皮1 小时前
前后端分离,千万别再搞错了!
java·前端·后端·计算机·程序员·编程·软件开发
前端赵哈哈1 小时前
Vite 构建后产品详情页图片失效?从路径匹配到映射表的完美解决
前端·vue.js·vite
葡萄城技术团队1 小时前
React Native 错误处理完全指南
前端