【CSS】P9 选择器优先级
创始人
2025-05-30 11:50:26
选择器优先级
- 抛出一个问题
- 选择器优先级
- 权重
- !important
- 外部样式与内部样式冲突
抛出一个问题
先抛出一个问题，请问下述代码的 h2 元素展示什么效果？
Document
我在学习选择器优先级知识
带着问题，学习选择器优先级知识
选择器优先级
行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，发生了样式的冲突。到底用哪个样式，此时需要根据优先级进行判断；
因为行内优先级最高，所以虽然不推荐CSS写行内的方式（破坏了html结构的整体性），但是 h2 元素颜色还是会因为 style:“color: blue” 而设定为蓝色；
此外，需要注意的是，该内容为覆盖的概念，即虽然行内选择器的优先级最高，但是如果其他选择器包含行内选择器不包含的内容，比如：
Document
我在学习选择器优先级知识
上述代码中，行内选择器只规定了内容的颜色，没有规定内容中字体大小font-size: 50px;，所以虽然 行内选择器 比 通配选择器 的优先级高，但是却也是将 通配选择器 中的字体大小设置展示出来；即是 覆盖 而非 替换；
权重
格式：(a, b, c)
a：ID选择器的格式
b：类，伪类，属性选择器的个数
c：元素，伪元素选择器的个数
例如：
ul>li (0,0,2)
div ul>li p a span (0,0,6)
#atguigu .slogan (1,1,0)
#atguigu .slogan a (1,1,1)
#aiguigu .slogan a:hover (1,2,1)
以上优先级为：
(1,2,1) > (1,1,1) > (1,1,0) > (0,0,6) > (0,0,2)
优先级权重最大，最后效果采用优先级最大的格式；
!important
一锤定音，只要有 !important 标识在最后，那么就采用其作为格式；
p {color: blue !important;
}
在这个例子中，所有的 p 元素都将被强制设置为蓝色，即使其他样式表或样式规则中使用了更高的优先级或具有更具体的选择器。
外部样式与内部样式冲突
如果外部样式与内部样式同时作用一个元素，那么效果的呈现，会根据外部样式与内部样式的优先级进行比较，优先级高者居上。
相关内容
热门资讯
实用的 PyYAML 使用技巧
AML 是一个被广泛使用的数据序列化和配置语言，作为一个开发者，总是不免...
C语言学习之路--指针篇
目录一、前言二、指针一、指针是什么1、指针的重要理解2、指针变量3、其他问题二、指针和指针类型1、指...
最牛，狂赚近70%！ 最牛，狂...
【导读】前5月主动权益类基金平均净值增长率为2.43%，最牛业绩逼近70%中国基金报记者 方丽 曹雯...
电容笔和Apple penci...
跟Apple Pencil最主要不同，市场上大部分的电容笔都没有重力的压感...
便携制氧机方案——PCBA/芯...
便携制氧机采用分子筛的吸附性能，通过物理原理，以无油压缩机为动力&#...
考研复试——离散数学
三年疫情都没有笔试，今年恢复，大概率会有笔试。 2023年3月19号&#...
分布式任务处理XXL-JOB
分布式任务处理XXL-JOB 什么是分布式任务调度 对一个视频的转码可以理解为一个任务的执行...
DirectX12（D3D12...
目录1、前言1.1、一些感慨1.2、运行效果展示1.3、示例简介1.4、示例操作说明1.5、本章内容...
小红书运营工具有哪些?新手运营...
很多人多多少少都会觉得小红书运营有一定的难度。但是其实在解决这些难题的时候，我们也...
Jetson NX 配置 py...
Jetson NX 配置pytorch 参考文档 官方教程–还得是官方啊 参考博客1 参考博客...
c++ error:cross...
最近在写代码的时候，碰到了 crosses initialization of ......
XShell安装配置教程及云服...
目录一、 XShell的作用二、 下载XShell1.访问XShell官网，填写姓名和...
五年五任！道通科技任命90后董...
【高管动态】深圳市道通科技股份有限公司的董秘，也许是最不好干的岗位之一了。根据道通科技（600208...
C++初阶——前言
目录 1. 什么是C++ 2. C++的发展史 3. C+&...
每周股票复盘：西部矿业（601...
截至2025年5月30日收盘，西部矿业（601168）报收于15.8元，较上周的16.07元下跌1....
特朗普癫了？突然反咬中美贸易协...
知道他会反口，没想到这么快反口。不然为什么叫“疯王”呢？从昨晚到现在，特朗普又搞出三件大事：反咬中国...
DevOps是什么？DevOp...
目录专栏导读一、DevOps是什么？二、为什么会出现DevOps？1、容...
“石家庄富豪”要签50亿美元大...
频繁资产腾挪，收效如何？ 作者 | 伍玥 编辑丨高岩 来源 | 野马财经 创新生物医药的出海热潮正在...
【零基础入门SpringBoo...
一、上手第一个程序 1、系统要求 此处以我自己使用的版本为例，在后期学习过程中遇到一...
马斯克黯然下课，临走前给特朗普...
黯然下课，马斯克要走了。5月底，马斯克正式宣布，即将卸任“政府效率部”部长职务，为其在特朗普政府的任...
Scala函数式编程
一、基本函数编程 在Scala 中函数式编程和面向对象编程完美融合在一起了 1 基础概念 1&#...
ChatGPT-4
前两天推出 ChatGPT-4，其创建者 OpenAI 展示了该机器人的增强功能——包...
UEFI 基础教程 （十三） ...
一、 修改UEFI UiApp源代码 修改 FrontPageStrings.uni 与 Front...
首进品牌超30%，餐饮选址新风...
总第4232期作者 |餐饮老板内参内参君逃离商场的餐饮人，正把店开到“高质价比商业体”“可能要撤店了...
94：二叉树的中序遍历
94：二叉树的中序遍历 总结 给定一个二叉树的根节点 root ，返...
03 - 初识Linux进程
---- 整理自狄泰软件唐佐林老师课程 查看所有文章链接：（更新中&...
中年男人又一宝？新型护肝科技一...
凌晨一点的上海陆家嘴，写字楼里依然灯火通明。30岁互联网大厂产品经理张磊目不转睛盯着电脑屏幕，手机健...
零入门kubernetes网络...
《零入门kubernetes网络实战》视频专栏地址 https://www.ixigua.com/7...
“一部手机游景区”，带你玩转V...
“一部手机游景区”已经不再是一个概念，现在各地纷纷大力发展VR智慧景区，...
Pytorch学习笔记--多G...
目录 1--前言 2--报错代码 3--解决方法 1--前言 最近在复现一篇 Pa...