【CSS】P8 选择器优先级
迪丽瓦拉
2025-05-30 05:36:58
0次
选择器优先级
- 抛出一个问题
- 选择器优先级
- 权重
- !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 元素都将被强制设置为蓝色，即使其他样式表或样式规则中使用了更高的优先级或具有更具体的选择器。
外部样式与内部样式冲突
如果外部样式与内部样式同时作用一个元素，那么效果的呈现，会根据外部样式与内部样式的优先级进行比较，优先级高者居上。
相关内容
热门资讯
linux入门---制作进度条
了解缓冲区 我们首先来看看下面的操作： 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统（六）：学...
8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤： 在Student.cpp的...
A.机器学习入门算法（三）：基...
机器学习算法（三）：K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块...
模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力
文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数（Nÿ...
Redis 所有支持的数据结构...
Redis 是一种开源的基于键值对存储的 NoSQL 数据库，支持多种数据结构。以下是...
win下pytorch安装—c...
安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询
文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇
调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网...
一篇超超超长，超超超全面网络图绘制教程，本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览...
随着互联网的发展，人们越来越离不开浏览器了。每天上班、学习、娱乐，浏览器...
TCP 协议
一、TCP 协议概念 TCP即传输控制协议（Transmission Control ...
营业执照的经营范围有哪些
营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目，是进行公司注册...
C++ 可变体(variant...
一、可变体(variant) 基础用法 Union的问题： 无法知道当前使用的类型是什...
血压计语音芯片，电子医疗设备声...
语音电子血压计是带有语音提示功能的电子血压计，测量前至测量结果全程语音播报...
MySQL OCP888题解0...
文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检...
（肆十二想说的一些话）Yolo这个系列我们已经更新了大概一年的时间，现在基本的流程也走走通了，包含数...
实战项目：保险行业用户分类
这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr...
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A...
文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...