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

深入讲解 CSS 选择器权重及实战

1. 权重计算规则详解

CSS 选择器的优先级由 三元组 (x, y, z) 决定,比较规则如下:

选择器类型权重值 (x, y, z)示例
ID 选择器x + 1#header → (1,0,0)
类/伪类/属性y + 1.active:hover
元素/伪元素z + 1div::before

比较规则:从左到右逐级比较。例如 (1,0,0) > (0,10,10)(ID 优先级最高)。

2. 实战代码示例
示例 1:基础权重对比
<style>div { color: blue; }         /* (0,0,1) */.title { color: green; }     /* (0,1,0) */#title { color: red; }       /* (1,0,0) */
</style><div class="title" id="title">Hello World</div>

效果:文字为红色(ID 选择器权重最高)。

示例 2:复合选择器权重计算
<style>.container p { color: blue; }       /* (0,1,1) */div p.special { color: green; }     /* (0,1,2) */#main .content p { color: red; }    /* (1,1,1) */
</style><div id="main" class="container"><div class="content"><p class="special">Text</p>  <!-- 最终为红色 --></div>
</div>

解析

  • #main .content p → (1,1,1)(最高优先级)

  • div p.special → (0,1,2)

  • .container p → (0,1,1)

示例 3:伪类和伪元素的权重
<style>a:hover { color: purple; }          /* (0,1,1) */.nav li::before { content: "★"; }   /* (0,1,2) */#menu li.active { color: orange; }  /* (1,1,1) */
</style><ul id="menu" class="nav"><li class="active">Item</li>  <!-- 文字为橙色,★ 仍显示 -->
</ul>

解析

  • #menu li.active 控制颜色((1,1,1))。

  • .nav li::before 控制伪元素内容(独立作用)。

示例 4:!important 的核武器
<style>p { color: blue !important; }  /* 强制最高 */#para { color: red; }          /* (1,0,0) 无效 */
</style><p id="para">Important Text</p>  <!-- 蓝色 -->

注意!important 会破坏权重规则,应尽量避免使用!

示例 5:属性选择器的权重
<style>input[type="text"] { border: 1px solid blue; }  /* (0,1,1) */.form-input { border: 2px dashed green; }       /* (0,1,0) */
</style><input type="text" class="form-input">  <!-- 蓝色实线边框 -->

解析:属性选择器 [type="text"] 的权重 (0,1,1) > 类选择器 (0,1,0)

3. 权重的常见误区
  1. 通配符 * 的权重
    * { color: black; } 的权重是 (0,0,0),低于所有其他选择器。

  2. 继承的样式
    继承的样式(如 font-family)不参与权重计算,优先级最低。

  3. 源码顺序的作用
    权重相同时,后定义的样式生效:

p { color: red; }
p { color: blue; }  /* 最终蓝色 */

4. 关键知识点

  1. 优先级排序(从高到低):

    • !important(强制最高,但避免滥用)

    • 行内样式(如 <div style="color: red;">

    • ID 选择器#id

    • 类/伪类/属性选择器.class:hover[type="text"]

    • 元素/伪元素选择器div::before

  2. 权重不进位
    (1, 0, 0) 的优先级高于 (0, 100, 100)(ID 选择器权重最大)。

  3. 相同权重时
    后定义的样式会覆盖前面的(源码顺序决定)。

相关文章:

深入讲解 CSS 选择器权重及实战

1. 权重计算规则详解 CSS 选择器的优先级由 三元组 (x, y, z) 决定&#xff0c;比较规则如下&#xff1a; 选择器类型权重值 (x, y, z)示例ID 选择器x 1#header → (1,0,0)类/伪类/属性y 1.active, :hover元素/伪元素z 1div, ::before 比较规则&#xff1a;从左到右逐级比…...

Mysql的查询

1.Mysql的基本查询 语法&#xff1a;select*from 表名;代表查询所有数据的所有列 SELECT * FROM classinfo; SELECT * FROM studentinfo; select 字段1&#xff0c;字段2.....from 表名;查询数据的指定字段 查询studentinfo表的学生姓名和年龄 SELECT stuname,age FROM stu…...

RaabitMQ 快速入门

&#x1f389;欢迎大家观看AUGENSTERN_dc的文章(o゜▽゜)o☆✨✨ &#x1f389;感谢各位读者在百忙之中抽出时间来垂阅我的文章&#xff0c;我会尽我所能向的大家分享我的知识和经验&#x1f4d6; &#x1f389;希望我们在一篇篇的文章中能够共同进步&#xff01;&#xff01;&…...

LLM: 探索LLM视觉缺陷

文章目录 前言一、Constructing MMVP Benchmarks1、CLIP-blind pair 二、MMVP-VLM bench1、Model size influence2、correlation between CLIP MLLMs 三、Mixture of Features1、Additive MoF Experiment2、Interleaved MoF Experiment 总结 前言 在使用多模态大模型时候是否会…...

常用的 ​​SQL 语句分类整理​​

以下是常用的 ​​SQL 语句分类整理​​&#xff0c;覆盖数据查询、操作、表管理和高级功能&#xff0c;适用于大多数关系型数据库&#xff08;如 MySQL、PostgreSQL、SQL Server&#xff09;&#xff1a; 目录 ​​一、数据查询&#xff08;DQL&#xff09;​​ ​​1. 基础查…...

Go之defer关键字:优雅的资源管理与执行控制

在Go语言中&#xff0c;defer关键字是处理资源释放、错误恢复和代码逻辑清理的利器。它看似简单&#xff0c;却隐藏着许多设计哲学和底层机制。本文将深入剖析defer的执行原理、使用场景和常见陷阱&#xff0c;助你掌握这一关键特性。 一、defer基础&#xff1a;延迟执行的本质…...

T1结构像+RS-fMRI影像处理完整过程记录(数据下载+Matlab工具箱+数据处理)

最近需要仿真研究T1结构像RS-fMRI影像融合处理输出目标坐标的可行性。就此机会记录下来。 为了完成处理&#xff0c;首先需要有数据&#xff0c;然后需要准备对应的处理平台和工具箱。那么正文开始~ &#xff08;1&#xff09;下载满足要求的开源数据 去OpenNEURO https://open…...

Flowable进阶-网关、事件和服务

网关 并行网关 并行网关允许将流程拆分为多个分支&#xff0c;也可以将多个分支汇集到一起。并行网关的功能是基于流入流出的顺序流。fork分支&#xff1a;用于任务的开始。并行后所有外出的顺序流&#xff0c;为每个顺序流都创建一个并发分支。 join汇聚&#xff1a;用于任务…...

【三维重建与生成】GenFusion:SVD统一重建和生成

标题:《GenFusion: Closing the Loop between Reconstruction and Generation via Videos》 来源&#xff1a;西湖大学&#xff1b;慕尼黑工业大学&#xff1b;上海科技大学&#xff1b;香港大学&#xff1b;图宾根大学 项目主页&#xff1a;https://genfusion.sibowu.com 文章…...

常见的爬虫算法

1.base64加密 base64是什么 Base64编码&#xff0c;是由64个字符组成编码集&#xff1a;26个大写字母AZ&#xff0c;26个小写字母az&#xff0c;10个数字0~9&#xff0c;符号“”与符号“/”。Base64编码的基本思路是将原始数据的三个字节拆分转化为四个字节&#xff0c;然后…...

有序二叉树各种操作实现(数据结构C语言多文件编写)

1.先创建tree.h声明文件( Linux 命令&#xff1a;touch tree.h)。编写函数声明如下(打开文件 Linux 操作命令&#xff1a;vim tree.h): //树的头文件位置 #ifndef __TREE_H__ #define __TREE_H__ //节点 typedef struct node{int data;//数据struct node* left;//记录左侧子节…...

Nacos-Controller 2.0:使用 Nacos 高效管理你的 K8s 配置

作者&#xff1a;濯光、翼严 Kubernetes 配置管理的局限 目前&#xff0c;在 Kubernetes 集群中&#xff0c;配置管理主要通过 ConfigMap 和 Secret 来实现。这两种资源允许用户将配置信息通过环境变量或者文件等方式&#xff0c;注入到 Pod 中。尽管 Kubernetes 提供了这些强…...

特殊文件以及日志——特殊文件

一、特殊文件 必要性&#xff1a;可以用于存储多个用户的&#xff1a;用户名、密码。这些有关系的数据都可以用特殊文件来存储&#xff0c;然后作为信息进行传输。 1. 属性文件.properties&#xff08;键值对&#xff09; &#xff08;1&#xff09;特点&#xff1a; 都只能…...

Spark-SQL核心编程语言

利用IDEA开发spark-SQL 创建spark-SQL测试代码 自定义函数UDF 自定义聚合函数UDAF 强类型的 Dataset 和弱类型的 DataFrame 都提供了相关的聚合函数&#xff0c; 如 count()&#xff0c; countDistinct()&#xff0c;avg()&#xff0c;max()&#xff0c;min()。除此之外&…...

jdk 安装

oracle官网 : Java Archive | Oracle 中国 export JAVA_HOME/Users/xxxxx/app/services/x86jdk/jdk1.8.0_431.jdk/Contents/Home export PATH$JAVA_HOME/bin:$PATH 华为镜像网站&#xff1a;Index of java-local/jdk...

Missashe考研日记-day21

Missashe考研日记-day21 1 专业课408 学习时间&#xff1a;4h学习内容&#xff1a; 今天先把昨天学的内容的课后习题做了&#xff0c;整整75道啊&#xff0c;然后学了OS第二章关于CPU调度部分的内容&#xff0c;这第二章太重要了&#xff0c;以至于每一小节的内容都比较多&am…...

双重路由引入的环路,选路次优的产生以及解决方法

描述 在R2,R3上双向引入ospf,以及rip,R5修改静态的优先级为180,在ospf中引入该静态路由 路由分析 选路次优问题 R5引入了静态路由,优先级是150 R2->R5->100.1.1.0,优先级是150 R3->R4->100.1.1.0,优先级是150 R3->R4->R5->100.1.1.0,优先级是150 R2-…...

环境变量概念以及获取环境变量(linux下解析)

目录 1 基本概念 2 常见的环境变量 3 查看环境变量方法 4 和环境变量相关的命令 5 环境变量的组织方式 6 通过代码如何获取环境变量 6.1 命令行参数 6.2 环境变量 7 通过系统调用获取或设置环境变量 1 基本概念 环境变量(environmentvariables)⼀般是指在操作系统中用来指…...

删除win11电脑上的阿尔巴尼亚输入法SQI

删除电脑自带的阿尔巴尼亚输入法 这个输入法在系统中并不显示&#xff0c;但是有时候会出现在右下角显示&#xff0c;删除这个输入法的流程如下&#xff0c;暂时没发现反复&#xff01; 第一步&#xff1a;打开注册表&#xff1a; winR打开运行&#xff0c;输入 regedit 第二…...

目标检测与分割:深度学习在视觉中的应用

&#x1f50d; PART 1&#xff1a;目标检测&#xff08;Object Detection&#xff09; 1️⃣ 什么是目标检测&#xff1f; 目标检测是计算机视觉中的一个任务&#xff0c;目标是让模型“在图像中找到物体”&#xff0c;并且判断&#xff1a; 它是什么类别&#xff08;classif…...

npm和npx的作用和区别

npx 和 npm 是 Node.js 生态系统中两个常用的工具&#xff0c;它们有不同的作用和使用场景。 1. npm&#xff08;Node Package Manager&#xff09; 作用&#xff1a; npm 是 Node.js 的包管理工具&#xff0c;主要用于&#xff1a; 安装、卸载、更新项目依赖&#xff08;包&a…...

OpenCV 图形API(36)图像滤波-----形态学操作函数morphologyEx()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 执行高级形态学变换。 该函数可以使用腐蚀和膨胀作为基本操作来执行高级形态学变换。 任何操作都可以原地进行。在处理多通道图像时&#xff0c;…...

Python入门到精通6:CSS网页美化入门1

CSS&#xff08;层叠样式表&#xff09;是网页设计的核心语言之一&#xff0c;它让我们的网页从单调的结构变得生动美观。今天&#xff0c;我将带大家快速了解CSS的基础知识&#xff0c;包括基本概念、引入方式、选择器、字体与文本样式以及调试工具的使用。 1. CSS基本概念 …...

【深入C++多态:基于消息解析器的设计、实现与剖析】

深入C多态&#xff1a;基于消息解析器的设计、实现与剖析 前言多态代码示例代码结构C多态的核心知识点多态的底层机制深入剖析多态的设计模式总结 前言 在C面向对象编程中&#xff0c;多态&#xff08;Polymorphism&#xff09;是实现灵活性和扩展性的核心特性&#xff0c;允许…...

Dockerfile 文件常见命令及其作用

Dockerfile 文件包含一系列命令语句&#xff0c;用于定义 Docker 镜像的内容、配置和构建过程。以下是一些常见的命令及其作用&#xff1a; FROM&#xff1a;指定基础镜像&#xff0c;后续的操作都将基于该镜像进行。例如&#xff0c;FROM python:3.9-slim-buster 表示使用 Pyt…...

Redis--持久化

一、持久化 Redis支持RDB和AOF两种持久化机制持久化功能有效地避免因进程退出造成数据丢失问题&#xff0c; 当下次重启时利用之前持久化的文件即可实现数据恢复。 二、RDB RDB 持久化是把当前进程数据⽣成快照保存到硬盘的过程&#xff0c;触发 RDB 持久化过程分为手动触发和…...

Markdown学习

Typora下载 Typora教程 标题 井号加空格——回车即可形成标题&#xff0c;几级标题几个井号。 字体 斜体——前后各一个*&#xff0c;回车 粗体——前后各两个*&#xff0c;回车 既斜体又粗体——前后各三个*&#xff0c;回车 删除线——前后各两个~&#xff08;波浪号…...

Vulhub-DarkHole靶机通关攻略

下载链接&#xff1a;https://www.vulnhub.com/entry/darkhole-1,724/ 扫描ip arp-scan -l扫描端口 nmap 192.168.112.144 -p-扫描目录 dirsearch -u http://192.168.112.144/有一个登录页面&#xff0c;还有一个upload目录&#xff0c;但是还没有找到上传点 先注册一个用…...

UniRig ,清华联合 VAST 开源的通用自动骨骼绑定框架

UniRig是清华大学计算机系与VAST联合开发的前沿自动骨骼绑定框架&#xff0c;专为处理复杂且多样化的3D模型而设计。基于强大的自回归模型和骨骼点交叉注意力机制&#xff0c;UniRig能够生成高质量的骨骼结构和精确的蒙皮权重&#xff0c;大幅提升动画制作的效率和质量。 UniR…...

深入解析 sklearn 中的 LabelEncoder:功能、使用场景与注意事项

标题&#xff1a;深入解析 sklearn 中的 LabelEncoder&#xff1a;功能、使用场景与注意事项 摘要&#xff1a; LabelEncoder 是 sklearn 中用于类别标签编码的重要工具&#xff0c;能够将离散的类别型标签转换为模型可识别的数值格式。本文详细解析 LabelEncoder 的核心功能…...

红帽Linux网页访问问题

配置网络&#xff0c;手动配置 搭建yum仓库红帽Linux网页访问问题 下载httpd 网页访问问题&#xff1a;首先看httpd的状态---selinux的工作模式&#xff08;强制&#xff09;---上下文类型(semanage-fcontext)---selinux端口有没有放行semanage port ---防火墙有没有active---…...

Muduo库代码剖析 : EventLoop

本文初发于 “天目中云的小站”&#xff0c;同步转载于此 EventLoop 详解 EventLoop类似于Reactor模型中的反应堆(Reactor)和事件分发器(Demultiplex)的合并, 其目的在于高效的接收事件, 并正确分配给对应的事件处理器. EventLoop中有两类关键的子控件 : Channel 和 Poller. C…...

Python网络爬虫设计(一)

目录 一、网络爬虫 1、基本的爬虫 2、获取URL 3、查找网页源码关键字 4、代码实现 二、requests库 1、requests的优势和劣势 2、获取网页的其他库 &#xff08;1&#xff09;selenium库 &#xff08;2&#xff09;pyppeteer库 三、pyppeteer库 1、pyppeteer库的来历…...

GEO供应商盈达科技发布:AI信源占位白皮书​

​​副标题&#xff1a;生成式AI时代的企业认知主权争夺战​​ ​​发布日期&#xff1a;2025年4月15日​​ ​​一、范式重构&#xff1a;从流量入口到认知主权的战略迁移​​ ​​生成式AI的规则革命​​ ​​73%的用户决策​​直接依赖AI生成内容&#xff0c;但​​68%的引…...

L1-4 拯救外星人

题目 你的外星人朋友不认得地球上的加减乘除符号&#xff0c;但是会算阶乘 —— 正整数 N 的阶乘记为 “N!”&#xff0c;是从 1 到 N 的连乘积。所以当他不知道“57”等于多少时&#xff0c;如果你告诉他等于“12!”&#xff0c;他就写出了“479001600”这个答案。 本题就请你…...

业务摆渡解锁信息孤岛,重塑数字医疗未来

某三甲医院的急诊科突然亮起红灯&#xff0c;一名车祸患者被紧急送入&#xff0c;主治医师需要调取其三个月前在科研专网存储的增强CT影像。若在两年前&#xff0c;这需要两位管理员手动导出、杀毒、跨网传输&#xff0c;耗时40分钟&#xff1b;而现在&#xff0c;系统自动触发…...

OpenCV中的轮廓近似方法详解

文章目录 引言一、什么是轮廓近似&#xff1f;二、OpenCV中的轮廓近似方法2.1Douglas-Peucker算法原理2.2函数原型 三、代码示例3.1. 基本使用 四、参数选择技巧五、与其他轮廓方法的比较六、总结 引言 在计算机视觉和图像处理中&#xff0c;轮廓是物体边界的重要表示形式。Op…...

4种方法将文件映射到内存提升读写速度

背景 考虑到以下应用需求&#xff0c;常将文件映射到内容&#xff0c;以提升读写效果。 高效文件读写&#xff1a;大文件操作时&#xff0c;避免多次read/write系统调用的开销。进程间通信&#xff08;共享内存&#xff09;&#xff1a;多个进程映射同一文件&#xff0c;实现…...

367. 有效的完全平方数

给你一个正整数 num 。如果 num 是一个完全平方数&#xff0c;则返回 true &#xff0c;否则返回 false 。 完全平方数 是一个可以写成某个整数的平方的整数。换句话说&#xff0c;它可以写成某个整数和自身的乘积。 不能使用任何内置的库函数&#xff0c;如 sqrt 。 示例 1…...

Ubuntu2404装机指南

因为原来的2204升级到2404后直接嘎了&#xff0c;于是要重新装一下Ubuntu2404 Ubuntu系统下载 | Ubuntuhttps://cn.ubuntu.com/download我使用的是balenaEtcher将iso文件烧录进U盘后&#xff0c;使用u盘安装&#xff0c;默认选的英文版本&#xff0c; 安装后&#xff0c;安装…...

爬虫框架 - Coocan

安装 pip install coocan 演示...

S06-Kep的跨通道传输

每次分享一小点&#xff0c;进步都是实实在在。小编今天又来分享了&#xff01;之前我们讲到的KepServer软件&#xff0c;是一个具备强大通讯能力的软件&#xff0c;但是当你的上位软件不够灵活的时候&#xff0c;又有多个通道的数据交互的需求&#xff0c;Kep的跨通道传输就为…...

Zookeeper单机三节点集群部署(docker-compose方式)

前提: 服务器需要有docker镜像zookeeper:3.9.3 或能连网拉取镜像 服务器上面新建文件夹: mkdir -p /data/zk-cluster/{data,zoo-cfg} 创建三个zookeeper配置文件zoo1.cfg、zoo2.cfg、zoo3.cfg,配置文件里面内容如下(三个文件内容一样): tickTime=2000 initLimit=10 …...

C++| 深入剖析std::list底层实现:链表结构与内存管理机制

引言 std::list的底层实现基于双向链表&#xff0c;其设计哲学与std::vector截然不同。本文将深入探讨其节点结构、内存分配策略及迭代器实现原理&#xff0c;揭示链表的性能优势和潜在代价。 1. 底层数据结构&#xff1a;双向链表 每个std::list节点包含&#xff1a; 数据域…...

mysql数据库的线程连接数、状态 、最大并发数、缓存等参数配置

mysql数据库的线程连接数、状态 、最大并发数、缓存等参数配置 https://www.modb.pro/db/1784385883449397248 mysql数据库的线程连接数、状态 、最大并发数、缓存等参数配置 SQL命令行临时设置操作 #查看mysql数据库的线程连接数&#xff1a; mysql> show global statu…...

HarmonyOS-ArkUI V2状态-PersistenceV2:持久化存储UI状态

PersistenceV2类是一个与AppStorageV2类用法非常相似的类。因为它俩是子类和父类的关系。如果不了解AppStorageV2,可以先跳转至了解一下这个类。 HarmonyOS-ArkUI V2工具类:AppStorageV2:应用全局UI状态存储-CSDN博客 PersistenceV2相比于其父类AppStorageV2而言,它存储的…...

App测试小工具

前言 最近app测试比较多&#xff0c;每次都得手动输入日志tag&#xff0c;手动安装&#xff0c;测完又去卸载&#xff0c;太麻烦。就搞了小工具使用。 效果预览 每次测试完成&#xff0c;点击退出本次测试&#xff0c;就直接卸载了&#xff0c;usb插下一个手机又可以继续测了…...

ZEP: 一种用于智能体记忆的时序知识图谱架构

摘要 我们介绍了Zep,一种新型的智能体记忆层服务,在深度记忆检索(DMR)基准测试中,超越了现有的最先进系统MemGPT。此外,Zep在比DMR更全面、更具挑战性的评估中表现优异,这些评估更好地反映了现实世界企业应用的需求。尽管现有的基于大语言模型(LLM)的检索增强生成(R…...

800 中值定理

文章目录 前言365366367368369370371372373总结 前言 中值定理貌似是压轴题&#xff0c;但是也没什么难的&#xff0c;我一定可以拿下。 background music : 《还是分开》张叶蕾 365 构造出罗尔定理需要的 F(x) 我现在没啥问题&#xff0c;然后就是要找出两个相等的点&…...

安装fvm可以让电脑同时管理多个版本的flutter、flutter常用命令、vscode连接模拟器

打开 PowerShellfvm安装 dart pub global activate fvm安装完成后&#xff0c;如果显示FVM无法识别&#xff0c;那么需要去添加环境变量path添加这个&#xff1a;C:\Users\Administrator\AppData\Local\Pub\Cache\bin 常用命令 fvm releases 查看用户可以装的flutter版本fvm l…...