CSS 优先级计算方法-白红宇

CSS 优先级计算方法

阅读量：89 次

发布时间：2019-02-26

本文共 657 字，大约阅读时间需要 2 分钟。

CSS选择器的优先级规则是基于特定的权重计算公式来确定的。这些规则帮助开发者理解不同选择器之间的冲突规则，从而正确应用样式。

选择器优先级规则

CSS选择器的优先级由以下规则决定：

内联样式：拥有内联样式的元素会覆盖所有其他样式，除非被!important标记。

ID选择器：每一个ID选择器的权重为{0,1,0,0}。多个ID选择器会叠加。

类、属性和伪类选择器：每一个类、属性或伪类选择器的权重为{0,0,1,0}。

标签和伪元素选择器：每一个标签或伪元素选择器的权重为{0,0,0,1}。

*选择器或继承样式：默认为{0,0,0,0}，除非被!important标记。

权重计算公式

权重计算公式由四个数字组成，表示为{A,B,C,D}，权重从左到右依次减小。

A：表示内联样式或!important标记，值为1或无穷大。

B：表示ID选择器的数量，值从0开始递增。

C：表示类、属性或伪类选择器的数量，值从0开始递增。

D：表示标签或伪元素选择器的数量，值从0开始递增。

优先级比较

比较优先级时，应从A开始逐步比较，直到找到最大的值即可。

示例解析

以下是几个常见选择器的权重计算：

div ul li：{0,0,0,3}

.nav ul li：{0,0,1,2}

a:hover：{0,0,1,1}

#box .nav a：{0,1,1,1}

优先级比较结果

根据权重计算公式，优先级顺序为：④ > ② > ③ > ①。

这种方法帮助开发者准确理解和应用CSS选择器规则，确保样式在浏览器中的正确应用。

转载地址：http://ldsu.baihongyu.com/

你可能感兴趣的文章

SpringBoot（十四）整合MyBatis

percona-xtrabackup 备份

Perfect，华为爆出 Redis 宝典，原来 Redis 性能可压榨到极致

SpringBoot集成OpenOffice实现doc文档转html

springboot自动扫描添加的BeanDefinition源码解析

Perl Socket传输（带注释）

ROS中机器人的强化学习路径规划器

rocketmq存储结构_rocketmq 消息存储

perl---2012学习笔记

Perl6 必应抓取(1)：测试版代码

perl学习之内置变量

perl正则表达式中的常用模式

Perl的基本語法

perl输出中文有乱码

Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 大数据ssh权限问题 hadoop起不来 hadoopssh错

PermissionError:Python 中的 [Errno 13]

PermissionError:[Errno 13] 权限被拒绝:‘/manage.py‘

return torch._C._broadcast_coalesced(tensors, devices, buffer_size)RuntimeError: NCCL Error 2:unhand

perspective意思_2020年12月英语四级词汇讲解丨考点归纳：perspective