[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配?

[css] 浏览器是怎样判断元素是否和某个CSS选择器匹配?

有选择器:
div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元素的父元素开始向上找,没有找到一个 tagName 为 div 且 class 中有 ready 的元素,就把原来的元素从集合中删去。
至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。
如图:
11558321348_ pic
注意:1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的 CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况;应用在即使 html 没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。2、为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用,遍历每一条 CSS Rule 通过集合筛选,比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

在这里插入图片描述

个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

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

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

相关文章

idea 插件开发 扫描sqlserver

大家好,我是烤鸭: 最近在搞sqlserver 升级 mysql/tidb,发现代码里的sql有很多地方需要改,想着能不能开发一个省点力。 官方的迁移指南: https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 方案…

VUE之文字跑马灯效果

1.效果演示 2.相关代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/vue-2.4.0.js"></script> </head> <body> <div id&…

PMP 错题记录

PMP 错题记录 大家好&#xff0c;我是烤鸭&#xff1a; 这次的PMP错题集本来想考前发&#xff0c;临时能看看&#xff0c;还是耽搁了&#xff0c;补发一下吧&#xff0c;不知道以后用不用的上&#xff0c;据说改版了&#xff0c;可能也用不上了。 变更题错题记录 9、一项…

nginx 配置 http/2(h2) 和 http 在同一端口的问题

nginx 配置 http/2(h2) 和 http 在同一端口的问题 大家好&#xff0c;我是烤鸭&#xff1a; ​ 这个完全是个采坑记录了。 场景说明 由于这边有个需求想加个支持 grpc 方式转发的域名。 正常的二级域名都是映射到80端口&#xff0c;所以也没想太多&#xff0c;按照这个…

FutureTask isDone 返回 false

大家好&#xff0c;我是烤鸭&#xff1a; ​ 今天看一下 FutureTask源码。好吧&#xff0c;其实遇到问题了&#xff0c;哪里不会点哪里。 伪代码 package src.executor;import org.springframework.scheduling.annotation.AsyncResult; import org.springframework.sche…

为什么MySQL数据库要用B+树存储索引

A&#xff1a;为什么MySQL数据库要用B树存储索引&#xff1f; Hash的查找速度为O(1)&#xff0c;而树的查找速度为O(log2n)&#xff0c;为什么不用Hash作为数据库的存储索引呢&#xff1f; 树的话&#xff0c;无非就是前中后序遍历、二叉树、二叉搜索树、平衡二叉树&#xff0c…

lettuce 配置域名 dns 切换

大家好&#xff0c;我是烤鸭&#xff1a; 如果你也有类似的困扰&#xff0c;运维告诉你&#xff0c;redis连接配置域名&#xff0c;这样出问题了&#xff0c;直接改dns地址就行&#xff0c;不需要重启服务。。。梦想是美好的&#xff0c;现实是残酷的。如果你使用的是 let…

zuul 1.x 和gateway性能对比

大家好&#xff0c;我是烤鸭&#xff1a; 今天分享下 zuul和gateway 网关压测。 环境&#xff1a; windows 10 jdk 8 压测工具&#xff1a; wrk jmeter 数据对比 场景是仅单独转发&#xff0c;接口 Thread.sleep(50) jmeter 12 线程&#xff0c;30s zuul&#xf…

redisson 大量ping操作,导致 tps过高

大家好&#xff0c;我是烤鸭&#xff1a; 这个问题有点奇怪&#xff0c;新服务上线&#xff0c;redis tps居高不下&#xff0c;还都是ping命令。 环境&#xff1a; 服务 &#xff1a; 280台&#xff0c;redis集群&#xff1a;12主24从 问题 由于服务刚上线&#xff0c;还没…

PMP 学习总结

大家好&#xff0c;我是烤鸭&#xff1a; PMP终于考过了。成绩出了一个月了&#xff0c;一直想写一篇总结但没下笔&#xff0c;主要原因最近有点忙(太懒了)。考试的内容是基于第6版的。 晒个证书 证书上没写等级&#xff0c;一般都宣称5A过(其实我是 4A1T过的)。 学习过程…

处理器映射器(HandlerMapping)及处理器适配器(HandlerAdapter)详解(一)

非注解 处理器映射器 和 处理器适配器 处理器映射器&#xff1a; 第一种: BeanNameUrlHandlerMapping <!-- 配置Handler --> <bean id"userController1" name"/queryUsers.action" class"com.bjxb.ssm.controller.UserController" />…

Gateway Sentinel 做网关降级/流控,转发header和cookie

大家好&#xff0c;我是烤鸭&#xff1a; Springcloud Gateway 使用 Sentinel 流量控制。 环境 springcloud-gateway的网关应用&#xff0c;springboot的服务&#xff0c;nacos作为注册中心 sentinel-dashboard-1.8.2 最新版下载地址&#xff1a; https://github.com/aliba…

django后台数据管理admin设置代码

新建admin用户 createsuperuser 设定好用户名&#xff0c;邮箱&#xff0c;密码 设置setting LANGUAGE_CODE zh-hansTIME_ZONE Asia/ShanghaiUSE_I18N TrueUSE_L10N TrueUSE_TZ False 在写好的users的app下修改admin.py # -*- coding: utf-8 -*- from __future__ import u…

rocketmq 初探(一)

大家好&#xff0c;我是烤鸭&#xff1a; 今天看下rocketmq。这篇主要是简单介绍下 rocketmq以及idea 本地调试 rocketmq。 项目架构 感兴趣的可以下载源码看下。 https://github.com/apache/rocketmq 项目结构图。 rocketmq-acl: acl 秘钥方式的鉴权&#xff0c;用在bro…

客户将数据库迁移上云的常用办法

下载网站:www.SyncNavigator.CN 客服QQ1793040---------------------------------------------------------- 关于HKROnline SyncNavigator 注册机价格的问题 HKROnline SyncNavigator 8.4.1 非破解版 注册机 授权激活教程 最近一直在研究数据库同步的问题&#xff0c;在网上…

基于nchan打造百万用户的聊天室

大家好&#xff0c;我是烤鸭&#xff1a; 这次介绍下nchan&#xff0c;nginx的一个module。 nchan 源码: https://github.com/slact/nchan 官网: https://nchan.io/ nginx 配置说明文档: https://nchan.io/documents/nginxconf2016-slides.pdf 测试环境搭建 4 台linux cent…

rocketmq 初探(二)

大家好&#xff0c;我是烤鸭&#xff1a; 上一篇简单介绍和rocketmq&#xff0c;这一篇看下源码之注册中心。 namesrv 先看两个初始化方法 NamesrvController.initialize() 和 NettyRemotingServer.start(); public boolean initialize() {// 加载配置文件this.kvConfigMana…

2 JVM 运行机制

转载于:https://www.cnblogs.com/likevin/p/10186591.html

WIN10远程连接时提示内部错误

微软官方的解决方案是重置远程连接设置&#xff0c;步骤如下&#xff1a; 1、以管理员身份运行命令提示符 2、输入以下命令&#xff1a; netsh winsoc reset 随后会提示重启电脑&#xff0c;遂解决。 3、重启后还不行的话&#xff0c;再试试删除掉远程连接保存的凭据&#xff0…

rocketmq 初探(四)

大家好&#xff0c;我是烤鸭&#xff1a; 上一篇简单介绍broker的初始化&#xff0c;这一篇介绍 NettyRequestProcessor 的实现(主要是broker里用到的)。 AdminBrokerProcessor、ClientManageProcessor、ConsumerManageProcessor、EndTransactionProcessor NettyRequestProce…