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

【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

news 2026/3/30 16:52:57

一、CSS 优先级

1、优先级引入

定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 ,

  • 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; 
    	<style>div {color: red;font-size: 30px;}div {color: blue;}</style>

  • 如果 CSS 选择器 不同 , 则需要考虑 CSS 优先级 问题 , 需要计算对应的 选择器 权重 ;

2、选择器基本权重 

 

  • 继承父类样式 选择器 , 权重 0,0,0,0 ; 
    		/* 0. 继承父类样式 权重 0,0,0,0 */body {color: red;}

  • 通配符选择器 * , 权重 0,0,0,0 ; 
    		/* 0. 通配符选择器 权重 0,0,0,0 */* {color: red;}

  • 标签选择器 , 权重 0,0,0,1 ; 
    		/* 1. 标签选择器 权重 0,0,0,1 */div {color: pink}

 

  • 类选择器 , 权重 0,0,1,0 ; 
    		/* 2. 类选择器 权重 0,0,1,0 */.one {color: blue;}

  • ID 选择器 , 权重 0,1,0,0 ; 
    		/* 3. ID 选择器 权重 0,1,0,0 */#two {color: green;}

  • 行内样式表 , 权重 1,0,0,0 ; 
    	/* 4. 行内样式表 权重 1,0,0,0 */<div class="one" id="two" style="color: purple;"> 选择器权重 </div>

  • 任何选择器中 样式后 添加 !important 权重会被提升为无穷大 , 即使在最低级的 标签选择器样式后添加 !important , 其样式的权重也会被强行提高到最高级 , 权重无穷大 ; 
    		/* 5. 任何选择器中 样式后 添加 !important 权重最高 */div {color: pink!important;}

    3、完整代码示例

     

    完整代码示例 :

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 0. 继承父类样式 权重 0,0,0,0 */body {color: red;}/* 0. 通配符选择器 权重 0,0,0,0 */* {color: red;}/* 1. 标签选择器 权重 0,0,0,1 */div {color: pink}/* 2. 类选择器 权重 0,0,1,0 */.one {color: blue;}/* 3. ID 选择器 权重 0,1,0,0 */#two {color: green;}/* 4. 行内样式表 权重 1,0,0,0 *//* 5. 任何选择器中 样式后 添加 !important 权重最高 */div {color: pink!important;}</style>
</head>
<body>/* 4. 行内样式表 权重 1,0,0,0 */<div class="one" id="two" style="color: purple;"> 选择器权重 </div>
</body>
</html>

    展示效果 : 最终展示的效果是 color: pink!important; 效果 , 其权重无穷大 ;

 

 

相关文章：

【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; <style>div {color: re…...

编程日记 2023/8/27 9:39:38

Linux Shell 搜索命令 grep

grep 是一个强大的文本搜索工具&#xff0c;用于在文件或标准输入中查找匹配指定模式的行。 它的基本语法是&#xff1a; grep [options] pattern [file...]其中&#xff0c;pattern 是要搜索的模式&#xff0c;可以是普通字符串或使用正则表达式表示的模式。file 是要被搜索…...

编程日记 2023/8/27 9:38:37

【C进阶】指针（一）

大家好&#xff0c;我是深鱼~ 【前言】&#xff1a; 指针的主题&#xff0c;在初阶指针章节已经接触过了&#xff0c;我们知道了指针的概念&#xff1a; 1.指针就是个变量&#xff0c;用来存放地址&#xff0c;地址的唯一标识一块内存空间&#xff08;指针变量&#xff09;&a…...

编程日记 2023/8/27 9:37:36

bug复刻，解决方案---在改变div层级关系时，导致传参失败

问题描述&#xff1a; 在优化页面时&#xff0c;为了实现网页顶部遮挡效果&#xff08;内容滚动&#xff0c;顶部导航栏不随着一起滚动&#xff0c;并且覆盖&#xff09;&#xff0c;做法是将内容都放在一个div里面&#xff0c;为这个新的div设置样式&#xff0c;margin-top w…...

编程日记 2023/8/27 9:36:35

2023年Java核心技术面试第九篇（篇篇万字精讲）

目录 十七 . 并发相关基础概念 17.1 线程安全 17.2 保证线程安全的两个方法 17.2.1 封装 17.2.2 不可变 17.2.2.1 final 和 immutable解释 17.3 线程安全的基本特性 17.3.1 原子性&#xff08;Atomicity&#xff09; 17.3.2 可见性&#xff08;Visibility&#xff09; 17.3.3 有…...

编程日记 2023/8/27 9:35:32

解码Python JSON：从基础到高级，掌握使用的精髓

摘要&#xff1a; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;在Python中通过json模块可以方便地处理JSON数据。本文将从JSON的基础概念讲解开始&#xff0c;逐步深入介绍json模块的各种功能和用法&#xff0c;带您从入门到…...

编程日记 2023/8/27 9:34:31

Qt --- 自定义工具类 持续更新... ...

QSettings使用 .h文件 #ifndef UTIL_H #define UTIL_H#include <QSettings>class Util {public:// 配置文件读写 {{static bool writeInit(QString path, QString user_key, QString user_value);static bool readInit(QString path, QString user_key, QString &u…...

编程日记 2023/8/27 9:33:30

GO语言圣经 第二章习题

练习2.1 向tempconv包添加类型、常量和函数用来处理Kelvin绝对温度的转换&#xff0c;Kelvin 绝对零度是−273.15C&#xff0c;Kelvin绝对温度1K和摄氏度1C的单位间隔是一样的。 conv.go package tempconv// CToF converts a Celsius temperature to Fahrenheit. func CToF(c …...

编程日记 2023/8/27 9:32:27

Java 语言实现线性查找算法

【引言】 线性查找算法是一种简单且直观的查找算法。它从数组的第一个元素开始逐个比较&#xff0c;直到找到目标元素&#xff0c;或者遍历完整个数组。本文将使用Java语言实现线性查找算法&#xff0c;并详细讲解其思想和代码实现。 【算法思想】 线性查找的核心思想是逐个比…...

编程日记 2023/8/27 9:31:26

xcode15 change

jump to define 由原先的 control command left click 改为command left click 可以方便使用TODO // TODO: 是不是这里要改成红色字体 将这个直接作为bookmark...

编程日记 2023/8/27 9:30:25

MySQL集群（mysql-cluster）

环境 系统环境&#xff1a;centos7 管理节点&#xff1a;192.168.127.128 数据节点&#xff1a;192.168.127.145&#xff0c;192.168.127.146 sql节点&#xff1a;192.168.127.145&#xff0c;192.168.127.146 约定 创建mysql用户&#xff0c;将程序部署到/home/mysql 目…...

编程日记 2023/8/27 9:29:23

基于神经网络的3D地质模型

地球科学家需要对地质环境进行最佳估计才能进行模拟或评估。 除了地质背景之外&#xff0c;建立地质模型还需要一整套数学方法&#xff0c;如贝叶斯网络、协同克里金法、支持向量机、神经网络、随机模型&#xff0c;以在钻井日志或地球物理信息确实稀缺或不确定时定义哪些可能是…...

编程日记 2023/8/27 9:28:22

Spring AOP教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 AOP为Aspect Oriented Programming的缩写&#xff0c;意为&#xff1a;面向切面编程&#xff0c;通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续&#xff0c;是软件开发中的一个热点&#xff0c;也是Spring框架中的一个重要内容…...

编程日记 2023/8/27 9:27:22

1.linux的常用命令

目录 一、Linux入门 二、Linux文件系统目录 三、Linux的vi和vim的使用 四、Linux的关机、重启、注销 四、Linux的用户管理 五、Linux的运行级别 六、Linux的文件目录指令 七、Linux的时间日期指令 八、Linux的压缩和解压类指令 九、Linux的搜索查找指令 ​​​​​​…...

编程日记 2023/8/27 9:26:19

XiaoFeng.Net 网络库使用

网络库介绍 XiaoFeng.Net网络库包含了 SocketServer,SocketClient,WebSocketServer,WebSocketClient四个类库 SocketServer 网络服务端同时支持Socket客户端连接&#xff0c;WebSocket客户端&#xff0c;浏览器WebSocket连接 SocketCleint 网络客户端 WebSocketServer WebSock…...

编程日记 2023/8/27 9:25:17

【ES6】—数组的扩展

一、类数组/ 伪数组 1. 类/伪数组: 并不是真正意义的数组&#xff0c;有长度的属性&#xff0c;但无法使用Array原型上的方法 let divs document.getElementsByTagName(div) console.log(divs) // HTMLCollection []let divs2 document.getElementsByClassName("xxx&q…...

编程日记 2023/8/27 9:24:16

Android 实现资源国际化

前言 国际化指的是当Android系统切换语言时&#xff0c;相关设置也随之改变&#xff0c;从而使用不同的国家地区&#xff1b; 简而言之&#xff0c;就是我们的Android App中的文字和图片会随着不同国家的地区变化从而切换为不同语言文字和不同国家的图片 文字图片国际化 只要…...

编程日记 2023/8/27 9:23:15

uni、js——点击与禁用（不可点击）、动态样式class

案例 没约满的时间可以点击进行选择&#xff0c;约满的就不能选择了。选择完之后变色变字。 核心思想就是创建一个第三方变量存起来&#xff0c;点击谁就存到第三方&#xff0c;在根据这个进行判断。 代码 <template><view class"content"><view cl…...

编程日记 2023/8/27 9:22:13

分布式技术

分布式没有权威的技术&#xff0c;只有实践经验和积累的组件。常见的分布式技术有发号机制、分布式数据库、分布式数据库事物、基于Redis的分布式缓存、分布式会话、分布式安全认证。 1、发号机制 在数据库&#xff08;关系数据库&#xff09;中&#xff0c;主键往往是一条记…...

编程日记 2023/8/27 9:21:10

Consul的简介与安装

1、Consul简介 Consul是一套开源的分布式服务发现和配置管理系统&#xff0c;由HashiCorp公司用Go语言开发&#xff0c;Consul提供了微服务系统中的服务治理、配置中心、控制总线等功能。这些功能中的每一个都可以根据需要单独使用&#xff0c;也可以一起使用以构建全方位的服…...

编程日记 2023/8/27 9:20:09

大麦抢票自动化终极指南：5分钟快速上手教程

大麦抢票自动化终极指南&#xff1a;5分钟快速上手教程 【免费下载链接】ticket-purchase 大麦自动抢票&#xff0c;支持人员、城市、日期场次、价格选择 项目地址: https://gitcode.com/GitHub_Trending/ti/ticket-purchase 您是否曾因热门演唱会门票秒光而遗憾&#x…...

编程新知 2026/3/30 16:41:24

终极指南：在PC上完美运行PS4游戏的秘密武器

终极指南&#xff1a;在PC上完美运行PS4游戏的秘密武器 【免费下载链接】shadPS4 PS4 emulator for Windows,Linux,MacOS 项目地址: https://gitcode.com/gh_mirrors/shad/shadPS4 你是否曾经梦想过在电脑上畅玩那些只能在PS4上体验的独占大作&#xff1f;今天&#xff…...

编程新知 2026/3/30 15:08:40

Obsidian插件终极汉化指南：obsidian-i18n让英文插件秒变中文界面

Obsidian插件终极汉化指南&#xff1a;obsidian-i18n让英文插件秒变中文界面 【免费下载链接】obsidian-i18n 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-i18n 你是否因为Obsidian插件的英文界面而头疼&#xff1f;面对"Backlink"、"Graph …...

编程新知 2026/3/30 14:54:37

王者荣耀进阶指南：如何用这个HTML5模拟器测试不同出装对英雄属性的影响

王者荣耀进阶指南&#xff1a;如何用HTML5模拟器优化英雄出装策略 在MOBA游戏的战术体系中&#xff0c;装备选择往往决定着团战的胜负走向。传统依靠经验积累的配装方式存在试错成本高、数据感知模糊等痛点&#xff0c;而现代HTML5技术构建的模拟器为玩家提供了可视化、即时反馈…...

编程新知 2026/3/30 13:06:26

ScanTailor Advanced：免费开源扫描文档处理终极指南

ScanTailor Advanced&#xff1a;免费开源扫描文档处理终极指南 【免费下载链接】scantailor-advanced ScanTailor Advanced is the version that merges the features of the ScanTailor Featured and ScanTailor Enhanced versions, brings new ones and fixes. 项目地址: …...

编程新知 2026/3/30 12:36:15

智能缓存加速：重新定义扩散模型推理效率

智能缓存加速&#xff1a;重新定义扩散模型推理效率 【免费下载链接】ComfyUI-TeaCache 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-TeaCache 在AI创作领域&#xff0c;等待成为最大的创作阻力。当你使用扩散模型生成图像或视频时&#xff0c;是否曾因漫长的…...

编程新知 2026/3/30 12:30:14

别再让DeepSeek-R1的＜think＞标签刷屏了！手把手教你用API和Python脚本一键隐藏思考过程

高效隐藏DeepSeek-R1思考过程的工程实践 当你在深夜调试一个集成DeepSeek-R1的客服系统时&#xff0c;终端突然被满屏的<think>标签刷爆——这种场景对开发者来说再熟悉不过了。作为一款强调推理过程的大语言模型&#xff0c;DeepSeek-R1默认会在输出中包含详细的思考步骤…...

编程新知 2026/3/30 11:39:57

MusePublic Art Studio参数详解：随机种子锁定与艺术风格复现方法

MusePublic Art Studio参数详解&#xff1a;随机种子锁定与艺术风格复现方法 1. 理解随机种子&#xff1a;艺术创作的"基因密码" 在AI图像生成领域&#xff0c;随机种子就像是每幅作品的DNA序列。它决定了生成过程中的随机性因素&#xff0c;是控制输出结果一致性的…...

编程新知 2026/3/30 11:23:47

HAL库定时器双杀技：STM32F401CCU6同时实现PWM输出+输入捕获的避坑指南

HAL库定时器双杀技&#xff1a;STM32F401CCU6同时实现PWM输出输入捕获的避坑指南 在嵌入式开发中&#xff0c;定时器是最基础也最强大的外设之一。对于STM32F4系列微控制器&#xff0c;HAL库提供了丰富的定时器功能&#xff0c;但如何在同一芯片上同时实现PWM输出和输入捕获&am…...

编程新知 2026/3/30 11:15:40

GLM-OCR镜像免配置优势：无需HuggingFace Token，离线环境安全可用

GLM-OCR镜像免配置优势&#xff1a;无需HuggingFace Token&#xff0c;离线环境安全可用 1. 什么是GLM-OCR及其核心价值 GLM-OCR是一个基于先进GLM-V编码器-解码器架构构建的多模态OCR识别模型&#xff0c;专门为复杂文档理解场景而设计。与传统的OCR工具不同&#xff0c;它不…...

编程新知 2026/3/30 11:01:32