0
0
php中文网
发布时间：2016-05-16 12:04:08
|2054人浏览过
|来源于php中文网
原创
看1个简单的CSS：
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
匹配原理：
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
相关文章
css定位元素总是偏离目标位置怎么办_通过position:left/top与transform:translate组合实现精准定位
css 媒体查询与页面宽度适配_动态调整页面布局
css 想快速实现徽章显示数字怎么办_使用 css bootstrap badge 组件
css 想给表单复选框未选状态添加图标怎么办_使用 ::before 伪元素与 :not(:checked)
css 想让导航栏固定同时响应滚动怎么办_position sticky top 0
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
