为什么元素显示的样式跟我设置的不一样?CSS优先级详解

一、什么是CSS中的选择器优先级?

在CSS中,选择器优先级是指确定应用于元素的最相关CSS声明的算法。这个优先级决定了哪个样式规则将被应用到元素上。根据选择器的类型和特定性,CSS规定了不同的优先级,例如ID选择器比类选择器具有更高的优先级。在CSS中,选择器的优先级决定了最终应用到元素的样式。

二、选择器的优先级计算

1、根据CSS中的优先级规则,以下是选择器的优先级顺序:

!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器

这些所有的选择器都可以归为以下三种选择器:IDCLASSTYPE,它们对应三列值,分别表示选择器的三个权重类别。这三列由匹配元素的选择器中每个权重类别的选择器组件数量确定。优先级从高到低的顺序如下:

  1. ID列:只包括ID选择器,例如#example。对于匹配选择器中的每个ID,将1-0-0添加到权重值中。

  2. CLASS列:包括类选择器,例如.myClass,属性选择器,如[type=“radio”]和[type|=“fr”],以及伪类,例如:hover、:nth-of-type(3n)和:required。对于匹配选择器中的每个类、属性选择器或伪类,将0-1-0添加到权重值中。

  3. TYPE列:包括类型选择器,例如p、h1和td,以及伪元素,例如::before、::placeholder和所有其他带有双冒号表示法的选择器。对于匹配选择器中的每个类型或伪元素,将0-0-1添加到权重值中。

2、计算权重

在计算权重时,通用选择器(*)和继承值的优先级为0,它们不影响优先级权重值。组合符号,例如+、>、~、空格和||,可能使选择器更具体,但不会增加优先级权重。

当具有相同优先级权重的竞争选择器时,将比较每列中的选择器组件数量,从左到右进行比较。如果ID列中的数字相同,则比较CLASS列,如果CLASS列中的数字也相同,则比较TYPE列。如果所有三列中的数字都相同,则最后声明的样式将具有优先权。

根据权重为样式设值:

  • 内联样式(权重值为1000)
  • ID选择器(权重值为100)
  • 类选择器、属性选择器和伪类选择器(权重值为10)
  • 元素选择器和伪元素选择器(权重值为1)

举个例子:

<!DOCTYPE html>
<html>
<head><style>p {color: red;} /* Specificity: 1 */.test {color: green;} /* Specificity: 10 */#demo {color: blue;} /* Specificity: 100 */</style>
</head>
<body><p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

在示例中,p元素应用了内联样式,ID选择器和类选择器。根据特定性算法,内联样式的权重值为1000,ID选择器的权重值为100,类选择器的权重值为10。因此,内联样式的权重值最高,所以文本颜色将是粉红色。

三、父子组件样式

在CSS中,当子元素定义了样式时,它的样式会覆盖继承来的样式,即使父元素样式的权重很高,被子元素继承时,子元素定义的样式会具有更高的优先级。这是因为在嵌套结构中,子元素的样式优先级会覆盖继承的样式。
即不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是子元素定义的样式会覆盖继承来的样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

select , poll, epoll思维导图

目录 1. 总的框架结构 2. select 3. poll 4. epoll 1. 总的框架结构 2. select

SpringCloud-Gateway服务网关

一、网关介绍 1. 为什么需要网关 Gateway网关是我们服务的守门神&#xff0c;所有微服务的统一入口。 网关的核心功能特性&#xff1a; 请求路由 权限控制 限流 架构图&#xff1a; 权限控制&#xff1a;网关作为微服务入口&#xff0c;需要校验用户是是否有请求资格&am…

使用阿里云服务器搭建网站教程,超简单10分钟网站上线

使用阿里云服务器快速搭建网站教程&#xff0c;先为云服务器安装宝塔面板&#xff0c;然后在宝塔面板上新建站点&#xff0c;阿里云服务器网aliyunfuwuqi.com以搭建WordPress网站博客为例&#xff0c;来详细说下从阿里云服务器CPU内存配置选择、Web环境、域名解析到网站上线全流…

Python之functools模块之lru_cache

Python之functools模块之lru_cache lru_cache functools.lru_cache(maxsize128, typedFalse)lru即Least-recently-used&#xff0c;最近最少使用。cache缓存 如果maxsize设置为None&#xff0c;则禁用LRU功能&#xff0c;并且缓存可以无限制增长。当maxsize是二的幂时&#x…

基于python+vue分类信息服务平台移动端的设计与实现flask-django-php-nodejs

分类信息服务平台是在Android操作系统下的应用平台。为防止出现兼容性及稳定性问题&#xff0c;框架选择的是django&#xff0c;Android与后台服务端之间的数据存储主要通过MySQL。用户在使用应用时产生的数据通过 python等语言传递给数据库。通过此方式促进分类信息服务平台信…

蓝桥杯单片机快速开发笔记——PCF8591的DAC模拟电压输出

一、原理分析 PCF8591电压信号探测器&#xff1a;http://t.csdnimg.cn/R38tC IIC原理&#xff1a;http://t.csdnimg.cn/v4dSv IIC指令&#xff1a;http://t.csdnimg.cn/RY6yi HC573/HC138&#xff1a;http://t.csdnimg.cn/W0a0U 数码管&#xff1a;http://t.csdnimg.cn/kfm9Y 独…

鸿蒙OpenHarmony开发实战:【MiniCanvas】

介绍 基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas&#xff0c;屏蔽了原有Canvas内部复杂的调用流程&#xff0c;支持一个API就可以实现相应的绘制能力&#xff0c;该库还在继续完善中&#xff0c;也欢迎PR。 使用说明 添加MiniCanvas依赖 在项目entry目录执行…

小桥的神秘礼物盒

0小桥的神秘礼物盒 - 蓝桥云课 (lanqiao.cn) 问题描述 在一个阳光明媚的早晨&#xff0c;小桥收到了一份神秘的礼物--一只魔法盒子。这个盒子有四个按钮&#xff0c;每个按钮都有特殊的功能: 按钮 A:“添加”&#xff0c;将一个神秘物品 (每个物品都有一个独特的编号)放入盒子中…

3693. 括号匹配 南京理工大学考研上机真题 栈的使用 注意检测栈是否为空

苗苗今天刚刚学会使用括号&#xff0c;不过他分不清小括号&#xff0c;中括号&#xff0c;大括号和尖括号&#xff0c;不知道怎么使用这些括号&#xff0c;请帮助他判断括号使用是否正确。 注意&#xff1a;不需要区分括号的优先级。 输入格式 共一行&#xff0c;包含一个由…

Docker学习笔记 - 常用命令

目录 基本概念常用命令使用docker compose启动脚本创建自己的image Docker命令文档 1. 下载一个image 从hub.docker.com下载一个image。 docker pull [image name]下载时指定image的tag。 docker pull [image name]:<tag>举例&#xff0c;下载postgre的tag为alpine…

【WEEK4】学习目标及总结【SpringMVC】【中文版】

学习目标&#xff1a; 三周四周 完成SpringMVC入门——第四周 这周一定 学习内容&#xff1a; 参考视频教程【狂神说Java】SpringMVC最新教程IDEA版通俗易懂整合SSM框架 Spring SpringMVC环境进行增删查改操作 AJAX 学习时间及产出&#xff1a; 第四周 MON~FRI 2024.3.18【…

CPP容器vector和list,priority_queue定义比较器

#include <iostream> #include <bits/stdc.h> using namespace std; struct VecCmp{bool operator()(int& a,int& b){return a>b;/*** 对于vector和list容器&#xff0c;这里写了&#xff1e;就是从大到小* 对于priority_queue容器&#xff0c;这里写…

配置java8和java11以及输入version命令没反应问题

电脑重置重新安装java8和java11记录一下供自己观看 安装过程掠过我自己能看懂就行 需要记录一下 因为JDK11以后Oracle把JRE集成到了JDK中&#xff0c;在安装JDK11及更高版本的JDK时&#xff0c;默认是不会自动安装JRE的。在jdk11的安装目录下打开命令行窗口或者shift鼠标右键…

婚恋小程序开发的资质需要哪些?维护成本高吗?

随着互联网的高速发展&#xff0c;人们的生活方式也在发生着翻天覆地的变化。在这个变化中&#xff0c;婚恋市场也逐渐走向了线上&#xff0c;婚恋小程序应运而生。那么&#xff0c;开发一款婚恋小程序需要哪些资质呢&#xff1f;维护成本又高不高呢&#xff1f;本文将从这两个…

[小程序开发] 自定义导航栏

在app.json或者page.json中&#xff0c;配置navigationStyle属性为custom&#xff0c;即可自定义导航栏。在设置以后&#xff0c;就会移除默认的导航栏&#xff0c;只保留右上角胶囊按钮。 "navigationStyle":"custom"

蓝桥杯基础数论(Python组)

素数 & 约数 & 幂 & 阶乘 一、素数 素数又称质数&#xff0c;一个大于1且只能被1和它本身整除的数被称为素数。对素数的求解往往是解决素数和约数问题的基础。 &#xff08;1&#xff09;求解方法 素数的求解有试除法、埃氏筛和线性筛三种求法&#xff0c;其中线…

xbackup 备份MySQL数据库脚本

#!/bin/bash ## 方法一:将回车符(\r)替换为换行符(\n) 替换不可见字符 报错问题:shell脚本执行错误 $‘\r‘:command not found ## sed -i s/\r// xtrabackup.sh ## 备份计划任务 ## ## 每天凌晨1:30一次全量备份 ## 每天间隔1小时一次增量备份 ## 30 1 * * * backup…

2024年新算法!PCA+CPO+K-means聚类,冠豪猪优化器(CPO)优化K-means,适合学习,也适合发paper

2024年新算法&#xff01;PCACPOK-means聚类&#xff0c;冠豪猪优化器&#xff08;CPO)优化K-means&#xff0c;适合学习&#xff0c;也适合发paper。 一、冠豪猪优化器 摘要&#xff1a;受冠豪猪(crest Porcupine, CP)的各种防御行为启发&#xff0c;提出了一种新的基于自然…

如何在Flutter中实现一键登录

获取到当前手机使用的手机卡号&#xff0c;直接使用这个号码进行注册、登录&#xff0c;这就是一键登录。 可以借助极光官方的极光认证实现 1、注册账户成为开发者 2、创建应用开通极光认证 &#xff08;注意开通极光认证要通过实名审核&#xff09; 3、创建应用获取appkey、 …

KeyguardViewMediator的面试题目

以下是一些关于KeyguardViewMediator的面试题目及简要答案&#xff1a; 题目&#xff1a;简述KeyguardViewMediator在Android系统中的作用。 答案&#xff1a;KeyguardViewMediator是Android系统中管理锁屏界面&#xff08;Keyguard&#xff09;的核心组件&#xff0c;它协调锁…