当前位置： 首页 > article >正文

CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5）

article 2026/3/5 1:58:11

CSS3 选择器权重问题语法知识点及案例代码

一、选择器权重概述

在 CSS 中，当多个选择器同时匹配同一个元素时，浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。

二、选择器权重计算规则

1. 内联样式（Inline Styles）

内联样式直接写在 HTML 元素的 style 属性中，权重为 1000。

2. ID 选择器（ID Selectors）

ID 选择器以 # 开头，权重为 100。

3. 类选择器、属性选择器和伪类选择器（Class, Attribute, and Pseudo-class Selectors）

类选择器以 . 开头，属性选择器用方括号 [] 包围，伪类选择器以 : 开头，它们的权重均为 10。

4. 元素选择器和伪元素选择器（Element and Pseudo-element Selectors）

元素选择器直接使用元素名称，伪元素选择器以 :: 开头，它们的权重均为 1。

5. 通配符选择器（Universal Selector）

通配符选择器用 * 表示，权重为 0。

6. 继承

某些 CSS 属性会从父元素继承到子元素，继承的样式权重为 0。

7. !important 声明

在样式声明后添加 !important，该声明的权重为 无穷大，会覆盖其他所有样式。

三、权重计算案例

案例 1：不同选择器类型权重比较

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 元素选择器，权重 1 */p {color: red;}/* 类选择器，权重 10 */.special {color: blue;}/* ID 选择器，权重 100 */#unique {color: green;}/* 内联样式，权重 1000 */</style>
</head>
<body><p id="unique" class="special" style="color: yellow;">这是一个段落文本。</p>
</body>
</html>

注释：

  • 段落元素同时被元素选择器 p、类选择器 .special、ID 选择器 #unique 和内联样式 style 匹配。
  • 根据权重规则，内联样式的权重最高（1000），所以文本颜色为黄色。

案例 2：选择器组合权重计算

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 元素选择器，权重 1 */div {background-color: lightgray;}/* 类选择器，权重 10 */.container {background-color: lightblue;}/* ID 选择器，权重 100 */#main {background-color: lightgreen;}/* 组合选择器，权重为各类选择器数量之和 */body #main div.container p {/* 1 (元素 p) + 10 (类 .container) + 100 (ID #main) + 1 (元素 div) + 1 (元素 body) = 114 */color: purple;}</style>
</head>
<body><div id="main" class="container"><p>这是一个段落文本，背景色由最高权重选择器决定。</p></div>
</body>
</html>

注释：

  • 段落元素被多个选择器匹配，包括元素选择器 p、类选择器 .container、ID 选择器 #main 和组合选择器 body #main div.container p。
  • 组合选择器的权重最高（114），所以文本颜色为紫色，背景色由组合选择器中的样式决定。

案例 3：!important 声明的使用

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 类选择器，权重 10 */.text {color: blue !important;}/* ID 选择器，权重 100 */#special {color: red;}</style>
</head>
<body><p id="special" class="text">这是一个特殊段落文本。</p>
</body>
</html>

注释：

  • 段落元素同时被类选择器 .text 和 ID 选择器 #special 匹配。
  • 类选择器中的 !important 声明使 color: blue 的权重高于 ID 选择器的 color: red，所以文本颜色为蓝色。

以下是在开发中常用的关于CSS3选择器权重的实际案例：

案例4：复杂页面布局中的样式覆盖

<!DOCTYPE html>
<html>
<head><title>复杂页面布局样式案例</title><style>/* 全局样式 - 权重较低 */p {color: #333; /* 权重1 */font-size: 14px;}/* 页面区域样式 - 权重中等 */.content p {color: #666; /* 权重11（1个类选择器+1个元素选择器） */font-size: 16px;}/* 特定模块样式 - 权重较高 */#mainContent .highlight {color: #FF6B6B; /* 权重110（1个ID选择器+1个类选择器） */font-weight: bold;font-size: 18px;}/* 特殊强调样式 - 权重最高 */#mainContent .highlight .emphasize {color: #2ECC71 !important; /* 权重无穷大 */font-style: italic;}</style>
</head>
<body><div id="mainContent" class="content"><p class="highlight">这是一段重点内容，应用了特定模块样式。</p><p class="highlight"><span class="emphasize">这是需要特别强调的内容</span>，应用了特殊强调样式。</p></div>
</body>
</html>

注释：

  • 在这个案例中，p 元素受到多个选择器的影响。全局样式的权重最低，被后续更高权重的选择器覆盖。
  • .content p 的权重高于全局样式，因此在 .content 区域内的段落文本颜色和字体大小会按照此选择器的设置显示。
  • #mainContent .highlight 的权重更高，进一步覆盖了前面的样式，使具有 highlight 类的段落呈现特定的样式。
  • .emphasize 类通过 !important 声明确保其颜色样式具有最高优先级，即使嵌套在其他高权重选择器中也能生效。

案例5：响应式设计中的样式调整

<!DOCTYPE html>
<html>
<head><title>响应式设计样式案例</title><style>/* 默认样式 - 权重较低 */.card {width: 300px;padding: 20px;margin: 10px;background: #f9f9f9;}/* 大屏幕样式 - 权重中等 */@media (min-width: 768px) {.card {width: calc(50% - 20px); /* 权重10（类选择器） */display: inline-block;}}/* 特定区域的卡片样式 - 权重较高 */#gallery .card {background: #fff; /* 权重100+10=110（ID选择器+类选择器） */box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 特殊状态下的卡片样式 - 权重最高 */.card.highlight {border: 2px solid #FF6B6B; /* 权重10+10=20（类选择器+类选择器） */}</style>
</head>
<body><div id="gallery"><div class="card highlight"><h3>卡片标题 1</h3><p>卡片内容...</p></div><div class="card"><h3>卡片标题 2</h3><p>卡片内容...</p></div></div>
</body>
</html>

注释：

  • 默认的 .card 样式在所有屏幕尺寸下都适用，但在大屏幕上会被媒体查询中的样式覆盖。
  • 媒体查询中的 .card 样式权重与默认样式相同，但由于在特定媒体条件下应用，所以会覆盖默认样式。
  • #gallery .card 的权重更高，因此在 #gallery 区域内的卡片会呈现更复杂的样式。
  • .card.highlight 的权重更高，通过添加额外的类来实现特殊样式的覆盖。

案例6：框架与自定义样式冲突解决

<!DOCTYPE html>
<html>
<head><title>框架与自定义样式冲突案例</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>/* 自定义样式 - 权重较低 */.custom-btn {background: #FF6B6B; /* 权重10 */color: white;}/* 重要自定义样式 - 权重较高 */.important-btn {background: #2ECC71 !important; /* 权重无穷大 */color: white !important;}</style>
</head>
<body><button class="btn btn-primary custom-btn">默认按钮</button><button class="btn btn-primary important-btn">重要按钮</button>
</body>
</html>

注释：

  • Bootstrap 框架的 .btn 和 .btn-primary 类具有一定的权重，会影响按钮的样式。
  • 自定义的 .custom-btn 类权重较低，可能无法完全覆盖 Bootstrap 的样式。
  • .important-btn 类使用了 !important 声明，确保其背景色和文字颜色能够覆盖 Bootstrap 的默认样式。

案例7：表单样式调整

<!DOCTYPE html>
<html>
<head><title>表单样式调整案例</title><style>/* 基础表单样式 - 权重较低 */input[type="text"] {padding: 8px;border: 1px solid #ddd; /* 权重1 */border-radius: 4px;}/* 特定表单区域样式 - 权重中等 */.form-group input[type="text"] {width: 200px; /* 权重11（类选择器+属性选择器） */}/* 错误状态样式 - 权重较高 */.form-group.has-error input[type="text"] {border-color: #FF6B6B; /* 权重110（类选择器+类选择器+属性选择器） */box-shadow: 0 0 3px rgba(255, 107, 107, 0.5);}/* 禁用状态样式 - 权重最高 */input[type="text"]:disabled {background: #f0f0f0 !important; /* 权重10+1000（伪类+!important） */opacity: 0.7;}</style>
</head>
<body><div class="form-group"><input type="text" placeholder="正常输入框"></div><div class="form-group has-error"><input type="text" placeholder="错误状态输入框"></div><input type="text" placeholder="禁用输入框" disabled>
</body>
</html>

注释：

  • 基础表单样式为所有文本输入框设置了通用样式，权重较低。
  • .form-group input[type="text"] 的权重高于基础样式，调整了特定区域内的输入框宽度。
  • .form-group.has-error input[type="text"] 的权重更高，通过添加 has-error 类来表示输入框的错误状态。
  • input[type="text"]:disabled 使用了伪类和 !important 声明，确保禁用状态下的样式具有最高优先级。

四、权重计算总结

选择器权重的计算可以帮助开发者更好地理解样式应用的优先级。在实际开发中，合理利用选择器权重可以避免样式冲突，提高开发效率。

相关文章：

CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5）

CSS3 选择器权重问题语法知识点及案例代码 一、选择器权重概述 在 CSS 中&#xff0c;当多个选择器同时匹配同一个元素时&#xff0c;浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。 二、选择器权重计算规则 1. 内联样式&…...

编程日记 2026/2/20 7:31:18

在Vue3中使用Echarts的示例

1.常用-引用ts文件方式 1.1 导出ts文件-一个简单的柱状图 export const baseBarChart (xdata: string[], data: number[][], legendData: string[]) > {if (data.length 0) {return noData;}// 定义颜色数组const color [#00CCCC,#FF9900,#1677DC,#FF6666,#B366FF,#666…...

编程日记 2026/3/4 19:47:49

Three.js 阴影 (Shadow) 知识点整理

阴影主要由 castShadow 和 receiveShadow 控制&#xff0c;并通过不同类型的光源 (DirectionalLight、SpotLight、PointLight) 生成。我们将系统地整理与阴影相关的知识点。 1️⃣ 基础概念 castShadow &#x1f3ad;&#xff1a;物体是否投射阴影。receiveShadow &#x1f3d…...

编程日记 2026/2/17 4:00:15

GHCTF web方向题解

upload?SSTI! import os import refrom flask import Flask, request, jsonify,render_template_string,send_from_directory, abort,redirect from werkzeug.utils import secure_filename import os from werkzeug.utils import secure_filenameapp Flask(__name__)# 配置…...

编程日记 2026/2/14 18:31:45

Logic-RL：小参数qwen模型复现DeepSeek R1 zero

最近很多参照DeepSeek模型训练推理模型的工作，本文将深入 “Logic-RL: Unleashing LLM Reasoning with Rule-Based Reinforcement Learning” 的论文，该论文提出了一种Rule-Based Reinforcement Learning, Logic-RL框架，旨在提升 LLM 的逻辑推理能力，在qwen2.5-7b-instruct…...

编程日记 2026/2/15 11:40:00

CVE-2017-5645(使用 docker 搭建)

介绍: 是一个与 Apache Log4j2 相关的安全漏洞,属于远程代码执行,它可能允许攻击者通过构造恶意的日志信息 在目标系统上执行任意代码 Log4j2 介绍 Log4j2 是 Apache 的一个日志记录工具,属于 Java 应用的日志框架,它是 Log4j 的升级版,性能更好,功能更多.它被广泛的适用于 J…...

编程日记 2026/3/4 6:26:46

conda install 和 pip install 的区别

conda install 和 pip install 是两个常用的包安装命令&#xff0c;但它们在很多方面存在差异。 1. 所属管理系统不同 1.1 conda install conda install 是Anaconda和Miniconda发行版自带的包管理工具 conda 的安装命令。conda 是一个跨平台的开源包管理系统和环境管理系统&…...

编程日记 2026/1/22 4:55:01

蓝桥杯备考：特殊01背包问题——》集合subset

我们划分成两个集合&#xff0c;实际上我们只需要看一部分就行了&#xff0c;也就是从集合的所有元素里挑出恰好满足集合总和的一半儿&#xff0c;当然&#xff0c;如果我们的集合总和是奇数的话&#xff0c;我们是无论如何也挑不出刚好一半儿的&#xff0c;因为我们没有小数&a…...

编程日记 2026/2/16 19:03:15

设计模式之外观模式：原理、实现与应用

引言 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过提供一个统一的接口来简化复杂系统的使用。外观模式隐藏了系统的复杂性&#xff0c;使得客户端可以通过一个简单的接口与系统交互。本文将深入探讨外观模式的原理、实现方式以及实…...

编程日记 2026/1/19 11:09:39

C#设计模式Demo——MVC

设计模式Demo——MVC 1.View1.1页面示例1.2View代码1.3修改界面以及代码 2.Model3.Controller4.数据结构5.枚举类型6.工具类6.1缓存信息6.2扩展类. 文件结构图 1.View 1.1页面示例 1.2View代码 using System; using System.Data; using System.Windows.Forms; using MVC模式…...

编程日记 2026/3/4 21:23:44

【sql靶场】第18-22关-htpp头部注入保姆级教程

目录 【sql靶场】第18-22关-htpp头部注入保姆级教程 1.回顾知识 1.http头部 2.报错注入 2.第十八关 1.尝试 2.爆出数据库名 3.爆出表名 4.爆出字段 5.爆出账号密码 3.第十九关 4.第二十关 5.第二十一关 6.第二十二关 【sql靶场】第18-22关-htpp头部注入保姆级教程…...

编程日记 2026/2/14 20:36:29

LabVIEW棉花穴播器排种自动监测系统

一、项目背景与行业痛点 1. 农业需求驱动 我国棉花主产区&#xff0c;种植面积常年超250万公顷&#xff0c;传统人工播种存在两大核心问题&#xff1a; 效率瓶颈&#xff1a;人均日播种面积不足0.5公顷&#xff0c;难以匹配规模化种植需求&#xff1b; 精度缺陷&#xff1a;人…...

编程日记 2026/2/15 0:33:03

【程序人生】成功人生架构图（分层模型）

文章目录 ⭐前言⭐一、根基层——价值观与使命⭐二、支柱层——健康与能量⭐三、驱动层——学习与进化⭐四、网络层——关系系统⭐五、目标层——成就与财富⭐六、顶层——意义与传承⭐外层&#xff1a;调节环——平衡与抗风险⭐思维导图 标题详情作者JosieBook头衔CSDN博客专家…...

编程日记 2026/2/15 14:27:14

golang开发支持onlyoffice的token功能

一直都没去弄token这块&#xff0c;想着反正docker run的时候将jwt置为false即可。 看了好多文章&#xff0c;感觉可以试试&#xff0c;但是所有文件几乎都没说思路。 根据我的理解和成功的调试&#xff0c;思路是&#xff1a; 我们先定义2个概念&#xff0c;一个是文档下载…...

编程日记 2026/2/15 23:40:34

Qt for WebAssembly程序中文乱码问题处理过程

一、环境 操作系统DeepinV23 Qt版本6.8.2 编程语言C 二、问题现象 Qt for WebAssembly应用在浏览器页面上英文字母显示正常&#xff0c;中文显示为乱码。 经测试分析原因为默认字体不能正常显示汉字。 三、处理过程 1.准备中文字体文件 从Windows下复制宋体简体字体文件…...

编程日记 2026/2/21 6:11:08

速通大厂测开

最近26届暑期实习招聘和25届春招已经开始&#xff0c;测开学习圈也有同学拿到offer了 今天分享一位25届秋招圈友快速拿到大厂测开offer的经历&#xff0c;希望对大家有所帮助 我是某211本科生&#xff0c;在去年暑假准备考研的间隙意外收获了某大厂测开实习offer&#xff0c;…...

编程日记 2026/2/17 6:25:56

基于Netty实现高性能HTTP反向代理

以下将分步骤实现一个基于Netty的高性能HTTP反向代理&#xff0c;支持动态路由、负载均衡和基础鉴权功能。 1. 项目依赖配置&#xff08;Maven&#xff09; 2. 定义路由规则 3. 实现HTTP反向代理服务端 4. 实现反向代理处理器 5. 实现基础鉴权 6. 性能优化策略 连接池管理…...

编程日记 2026/2/20 20:57:42

Spring Boot集成MyBatis与MySQL

Spring Boot集成MyBatis与MySQL开发全攻略 一、前言&#xff1a;现代Java持久层开发的选择 在微服务架构盛行的今天&#xff0c;Spring Boot以其"约定优于配置"的理念成为Java开发的事实标准。结合MyBatis这一灵活高效的ORM框架和MySQL这一成熟稳定的关系型数据库&…...

编程日记 2026/2/27 13:18:05

【NLP 37、实践 ⑨ NER 命名实体识别任务 LSTM + CRF 实现】

难过的事情我要反复咀嚼&#xff0c;嚼到它再也不能困扰我半分 —— 25.3.13 数据文件&#xff1a; 通过网盘分享的文件&#xff1a;Ner命名实体识别任务 链接: https://pan.baidu.com/s/1fUiin2um4PCS5i91V9dJFA?pwdyc6u 提取码: yc6u --来自百度网盘超级会员v3的分享 一、配…...

编程日记 2026/2/24 18:24:55

再学：函数可见性、特殊函数、修饰符

目录 1.可见性 2.合约特殊函数 constructor && getter 3. receive && fallback 4.view && pure 5.payable 6.自定义函数修饰符 modifier 1.可见性 public&#xff1a;内外部 private&#xff1a;内部 external&#xff1a;外部访问 internal&…...

编程日记 2026/2/24 18:22:20

基于Spring Boot的项目申报系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2026/2/24 18:29:22

Web元件库 ElementUI元件库+后台模板页面（支持Axure9、10、11）

Axure是一款非常强大的原型设计工具&#xff0c;它允许设计师和开发者快速创建高保真原型&#xff0c;以展示应用或网站的设计和功能。通过引入各种元件库&#xff0c;如ElementUI元件库&#xff0c;可以极大地丰富Axure的原型设计能力&#xff0c;使其更加贴近实际开发中的UI组…...

编程日记 2026/2/24 18:25:54

若依excel工具类导出excel模板数据带下拉映射

导出模板代码&#xff0c;原理是combo属性 传递一个数组 里面是label下拉数组。 Overridepublic void downloadTemplate(HttpServletResponse response) {ExcelUtil<ThMachineryManageExcel> util new ExcelUtil<>(ThMachineryManageExcel.class);List<SysDist…...

编程日记 2026/2/16 12:25:25

孜然SEO静态页面生成系统V1.0

孜然SEO静态页面生成系统&#xff0c;1秒生成上万个不同的静态单页系统&#xff0c;支持URL裂变采集&#xff0c;采集的内容不会重复&#xff0c;因为程序系统自带AI重写算法&#xff0c;AI扩写算法&#xff0c;可视化的蜘蛛池系统让您更清楚的获取到信息&#xff01; 可插入二…...

编程日记 2026/2/28 7:54:13

Python爬虫-爬取汽车之家燃油车月销量榜数据

前言 本文是该专栏的第48篇，后面会持续分享python爬虫干货知识，记得关注。 在本文中，笔者已整理18篇汽车平台相关的爬虫项目案例。对此感兴趣的同学，可以直接翻阅查看。 而本文，笔者将以汽车之家平台为例子。基于Python爬虫，实现批量爬取全部“燃油车”的月销量数据。废…...

编程日记 2026/2/16 4:45:58

Blender-MCP服务源码3-插件开发

Blender-MCP服务源码3-插件开发 Blender-MCP服务源码解读-如何进行Blender插件开发 1-核心知识点 1&#xff09;使用Blender开发框架学习如何进行Blender调试2&#xff09;学习目标1-移除所有的Blender业务-了解如何MCP到底做了什么&#xff1f;3&#xff09;学习目标2-模拟MC…...

编程日记 2026/3/4 21:29:12

C语言和C++到底有什么关系？

C 读作“C 加加”&#xff0c;是“C Plus Plus”的简称。 顾名思义&#xff0c;C 就是在 C 语言的基础上增加了新特性&#xff0c;玩出了新花样&#xff0c;所以才说“Plus”&#xff0c;就像 Win11 和 Win10、iPhone 15 和 iPhone 15 Pro 的关系。 C 语言是 1972 年由美国贝…...

编程日记 2026/2/27 12:36:43

【华三】路由器交换机忘记登入密码或super密码的重启操作

【华三】路由器交换机忘记登入密码或super密码的重启操作 背景步骤跳过认证设备&#xff1a;路由器重启设备翻译说明具体操作 跳过当前系统配置重启设备具体操作 背景 当console口的密码忘记&#xff0c;或者说本地用户的密码忘记&#xff0c;其实这时候是登入不了路由器的&am…...

编程日记 2026/3/4 21:13:33

DeepSeek-prompt指令-当DeepSeek答非所问，应该如何准确的表达我们的诉求？

当DeepSeek答非所问&#xff0c;应该如何准确的表达我们的诉求&#xff1f;不同使用场景如何向DeepSeek发问&#xff1f;是否有指令公式&#xff1f; 目录 1、 扮演专家型指令2、 知识蒸馏型指令3、 颗粒度调节型指令4、 时间轴推演型指令5、 极端测试型6、 逆向思维型指令7、…...

编程日记 2026/3/1 3:46:20

HOVER：人形机器人的多功能神经网络全身控制器

编辑&#xff1a;陈萍萍的公主一点人工一点智能 HOVER&#xff1a;人形机器人的多功能神经网络全身控制器HOVER通过策略蒸馏和统一命令空间设计&#xff0c;为人形机器人提供了通用、高效的全身控制框架。https://mp.weixin.qq.com/s/R1cw47I4BOi2UfF_m-KzWg 01 介绍 1.1 摘…...

编程日记 2026/2/15 1:46:00