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. 标签选择器 = 伪元素选择器

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

相关推荐
用户14567756103717 分钟前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎18 分钟前
npm、yarn、pnpm
前端·npm·node.js
天生我材必有用_吴用1 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo1 小时前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine2 小时前
JS Entry和 HTML Entry
前端