前端中CSS选择器权重的问题

news2024/12/23 11:05:50

前言

前端中很重要的CSS,使得网页更加丰满美丽,我们使用CSS时,必不可少的需要使用选择器,选择器也分为简单选择器和复合选择器。而在给选择器中填充内容时,有时候会有一些命令重复,会涉及到优先级的问题,所以优先级孰轻孰重需要了解。

正文:

可知每种选择器的权重是不一样的,而权重越大,代表着优先级越高,说明一下,这个权重不是二进制哈。

当然也有一些注意点:

复合选择器的权重是会叠加的,比如类选择器的#boy的权重为10,但是#boy p 此时这个复合选择器的权重就是10+1=11。(虽然会叠加,但是是不会产生进位的哈)

如表所示继承的权重是0,也就是说无论父级权重多大,子代继承的样式权重都是0。

那么如果权重一样咋办呢?答案是就近原则。

下面举一些例子:

HTML和CSS代码

网页结果显示:(因为box属于父级别,所以权重是0,但是p是元素选择器,权重为1,)(官大一级压死人)

HTML和CSS代码

 

网页结果显示:原因是  .NIU P 是类选择器加元素选择器,所以权重为11,但是 .ben 权重为10

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

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

相关文章

setInterval 实现匀速运动示例【JavaScript】

这段代码利用 setInterval 实现了一个简单的动画&#xff0c;当用户点击按钮时&#xff0c;页面上的方块会向右移动&#xff0c;直到到达一定的边界为止。 实现效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><met…

Java搭建法律AI助手,快速实现RAG应用

使用AI4J快速接入RAG应用 | 结合Pinecone实现法律AI助手RAG应用 本博文给大家介绍一下如何使用AI4J快速接入OpenAI大模型&#xff0c;并且结合Pinecone向量数据库实现一个刑法AI助手的RAG应用。 介绍 由于SpringAI需要使用JDK17和Spring Boot3&#xff0c;但是目前很多应用依…

初识 C 语言(一)

目录 一、 第一个 C 程序1. printf() 函数和 stdio.h 头文件2. main() 函数和 return 语句 二、类型和变量1. C 语言中的基本类型2. 变量的创建和命名规则3. 类型和变量的大小 三、printf() 函数和 scanf() 函数1. printf() 函数的使用2. 各种类型的输出格式3. scanf() 函数的使…

屏幕翻译下载哪个?建议试试这5个

国庆假期快到了&#xff0c;计划出国游或享受宅家追更海外剧的你&#xff0c;是否担心语言不通带来的小困扰&#xff1f; 别急&#xff0c;下面这篇文章就为你揭秘5款屏幕翻译免费软件&#xff0c;无论是浏览外国网站、阅读外语文档还是跨越语言障碍&#xff0c;都毫无压力。 …

YOLOv8-pose+streamlit 实现人体关键点检测/姿态估计系统(后续可用于健身时的姿态估计,训练纠正等....)

人体关键点检测系统 一、安装与配置1.1 安装 Streamlit1.2 配置文件1.3 运行Streamlit应用1.4 找模板 二、人体关键点检测算法2.1 关键点序号2.2 YOLOv8-pose图像推理 三、将YOLOv8-pose算法内置到streamlit中3.1 整体结构3.2 常见问题- RGB通道颠倒- Numpy与OpenCV之间的转换 …

java-必会jdk1.8新特性

1:抽象类的变化 前言&#xff1a; 接口里只能做方法定义不能有方法的实现&#xff0c;抽象类的方法不需要继承类必须去实现的一种方式。 定义一个抽象类TestAbstractclass 如下 package com.lm.jdk8.Abstractclass;/*** 抽象类*/ public abstract class Abstractclass {abstrac…

通信工程学习:什么是PNF物理网络功能

PNF:物理网络功能 PNF(Physical Network Function)即物理网络功能,是指支持网络功能的物理设备。以下是关于PNF的详细解释: 一、定义与特点 定义: PNF是网络设备厂商(如Cisco、华为、H3C等)通过专用硬件实体提供软件功能的设备。这些设备直接在物理服务器上运…

java:异常处理

背景 Java中的异常体系基于几个关键的概念和类&#xff0c;主要包括Throwable类、Exception类&#xff08;及其子类&#xff09;和Error类。 异常分类 1. Throwable 类 Throwable 是所有错误与异常的超类。它有两个直接子类&#xff1a;Error 和 Exception。 2. Error 类 …

【OpenAI o1思维链CoT必看论文】谷歌“思维链提示“让AI更懂人类推理

原创 超 超的闲思世界 AI的推理能力正迎来一场重大突破。谷歌大脑团队最新开发的"思维链提示"方法&#xff0c;让大型语言模型在复杂推理任务上展现出惊人的进步。这项创新技术无需对模型进行额外训练&#xff0c;却能显著提升AI的推理能力&#xff0c;让机器的思…

python命令行怎么换行

在命令行中“>>>”是python的输入提示符&#xff0c;按回车键则表示输入结束。那么如何在命令行中换行呢&#xff1f; 换行方法&#xff1a;\ 如&#xff1a; >>> print aaa; \ ... print bbb; \ ... print ccc 注意“&#xff1b;”的使用。python本身语句…

excel单元格增加可选下拉列表

excel单元格增加可选下拉列表 下拉设置&#xff1a;数据–数据验证-选择序列-填写来源&#xff08;来源数据用英文逗号分隔&#xff09;&#xff08;是,否&#xff09;- 区域应用&#xff1a;选定区域-数据验证-是-确认

2024年第十届信息学与商业工程国际会议(ICIBE 2024)将在泰国曼谷召开!

2024年第十届信息学与商业工程国际会议 (ICIBE 2024) 将于2024年12月20日-22日在泰国曼谷举办。ICIBE 2024由泰国兰实大学主办&#xff0c;中国澳门大学和菲律宾马普亚大学提供技术支持。本次会议为来自世界各地的专业人士、科学家、工程师、教育工作者、学生和研究人员提供了一…

tauri程序加载本地图片或者文件在前端页面展示

要想在前端页面中展示本地文件或者文件夹&#xff0c;需要使用convertfilesrc这个api&#xff0c;可以非常方便的展示内容&#xff0c;官方文档&#xff1a;tauri | Tauri Apps convertFileSrc甚至位于invoke之前&#xff0c;但我却一直没有注意到它&#xff0c;一方面是因为&…

街头摊贩检测系统源码分享

街头摊贩检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

磷酸化多肽及其修饰方法

【知识与技术分享~~~】 磷酸化多肽主要指肽链中的Ser、Tyr和Thr残基的侧链羟基被修饰成酸式磷酸酯多肽&#xff0c;有L构象和D构象之分&#xff0c;其结构如下&#xff1a; 楚肽生物提供 在固相多肽合成SPPS&#xff08;Solid-PhasePeptide Synthesis&#xff09;采用的是Fmoc-…

Day100 代码随想录打卡|动态规划篇--- 01背包问题(一维数组版)

题目&#xff08;卡玛网T46&#xff09;&#xff1a; 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等等&am…

2024外研社综合能力大赛第一场真题

网上找滴~自用 审核不过&#xff0c;备考指南发知乎了&#xff1a;https://zhuanlan.zhihu.com/p/730698685

基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue

基于GIKT深度知识追踪模型的习题推荐系统 目录结构 Flask-BackEnd flask后端 app 后端主体文件 alg 深度学习模块 data 数据集data_process.py 数据预处理gikt.py GIKT模型pebg.py PEBG模型params.py 一些参数train.py 仅模型训练train_test.py 模型训练和测试-五折交叉验证t…

C++ 语言课程笔记

C 语言课程笔记 C语言程序设计第四版——谭浩强著&#xff0c;此书中的代码题大部分已经在本文中展示&#xff0c;以及南开大学 C 语言上机题库 100 题的作答&#xff0c;如果有作答不正确的地方或者可优化的地方&#xff0c;欢迎指正&#xff0c;谢谢&#xff01; 001 屏幕输出…

一招搞定苹果安卓跨系统传输,文件大小再也不是问题

在当今多元化的科技市场中&#xff0c;众多手机品牌竞相推出各自的产品&#xff0c;每个品牌都力图打造独特的用户体验和生态系统。然而&#xff0c;这种品牌之间的多样性也带来了一定的挑战&#xff0c;尤其是在不同品牌体系之间互联互通性方面。由于每个品牌都有自己的操作系…