用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看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:
<style>
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
1.不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。
2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3.尽量少使用层级关系
一般写法：#divBox p .red{color:red;}
更好写法：.red{..}
4.使用class代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}
分享到：
相关推荐
- 如Sass、Less和Stylus，它们提供变量、嵌套规则、混合等功能，使CSS编写更简洁和模块化。 使用Zeal这样的离线文档工具，开发者可以快速查找CSS属性、方法、示例和最佳实践，无需互联网连接。这对于在没有网络的...
3. **了解并运用CSS新特性**：如Flexbox和Grid布局、CSS变量、 calc() 函数等，这些新特性可以极大地简化布局和计算，使代码更简洁。 4. **避免使用内联样式和ID选择器**：内联样式不易管理和维护，而ID选择器权重...
5. **预处理器**：如Sass、Less和Stylus，它们扩展了CSS的功能，引入变量、嵌套规则和混合等概念，使得CSS编写更加简洁和模块化。 **DIV**： DIV是一个HTML标签，代表“分区”或“段落”。它是块级元素，可以容纳...
总之，“CSS英语小字典”是web开发者学习CSS时的一个实用工具，它以简洁明了的方式介绍了核心概念，对于那些想要精通CSS的初学者和专业人士都是一个不可多得的学习资料。记得下载并保存这个PDF文件，让它成为你开发...
总的来说，"视频分享网站CSS模板"为开发高效、美观的视频分享网站提供了便捷的起点，通过熟练运用CSS技术和理解模板结构，开发者可以快速打造出符合用户需求的在线视频平台。在实际开发过程中，还需要结合其他前端...
在IT行业中，网络爬虫和自动化测试是两个重要的领域，而Python因其简洁的语法和丰富的库支持，成为了这两个领域的首选语言之一。PyQT5是一个强大的Python GUI库，它允许开发者创建桌面应用程序。在这个场景中，我们...
在JavaScript中获取具有相同CSS样式的元素是一项常见的任务，特别是在进行网页动态效果或者交互设计时。...而在jQuery的帮助下，这个过程变得更加简洁高效。对于大型项目，合理利用工具和库可以显著提高开发效率。
正则表达式是用于匹配字符串模式的一种方式，广泛应用于JavaScript中进行文本查找、替换和验证。了解正则表达式可以提高数据处理和表单验证的效率。基础概念如元字符、量词、分组和预查都是学习的重点。 【JQuery】...
#### 三、CSS属性继承的工作原理 继承属性会从父元素获取对应属性的**计算值（Computed Value）**。计算值是指经过解析后实际应用在元素上的值。如果子元素没有设置该属性或者设置了`inherit`关键字，则会使用父...
3. `document.querySelector()` 和 `document.querySelectorAll()` 用于查找匹配CSS选择器的元素。 4. `event` 对象提供了处理用户交互的能力，如点击、滚动等事件。 **CSS（Cascading Style Sheets）** CSS负责...
正则表达式是一种模式匹配工具，用于在文本中查找、替换或提取符合特定规则的字符串。例如，你可以使用正则表达式验证电子邮件地址的格式，检查用户输入的数据是否合法。在JavaScript中，我们可以使用`/pattern/...
在JavaScript的世界里，jQuery是一个非常流行且强大的库，它极大地简化了DOM操作、事件处理以及Ajax交互等任务。...通过熟练掌握这些选择器，开发者可以编写出更高效、更简洁的JavaScript代码，提高网页的开发效率。
这个方法可能包含解析选择器、查找匹配元素的功能，并返回一个方便操作的结果集。例如，你可以设计一个Css方法，接收一个CSS选择器字符串，然后返回对应的jQuery对象或者原生DOM元素，这样可以简化页面元素的操作，...
CSS selector以其简洁和强大的选择能力，成为了自动化测试中定位页面元素的常用技术。 4. 元素定位： 在自动化测试中，对页面元素的精确定位是至关重要的。以下是一些常用的定位方法示例： - 使用id定位：如"//E[@...
在实际应用中，`DIV+CSS`布局相较于传统的表格布局有诸多优势：代码更简洁，可维护性更强，更利于SEO（搜索引擎优化），同时能更好地实现响应式设计，使网站在不同设备和屏幕尺寸上都能良好显示。 "适应各种WEB项目...
这份"Simple Style" CSS速查表是开发者日常工作中的一份实用工具，它简洁明了地总结了CSS的核心概念和常用技巧，帮助开发者提高工作效率，确保网页设计既美观又高效。无论是CSS初学者还是经验丰富的专业人士，都可以...
在Python的Selenium库中，元素定位是...综上所述，Xpath和CSS选择器各有优势，掌握两者能帮助我们在Selenium自动化测试中更高效地定位和操作网页元素。在具体项目中，可以根据场景和性能需求灵活选择使用哪种定位方式。
CSS仓库通常是一个集合，包含了各种CSS相关的资源，例如预处理器、框架、工具、库、教程、代码片段等，这些资源有助于开发者更高效地构建响应式、美观且易于维护的网页。 **CSS基础知识** 1. **选择器**: CSS选择...
3. **说明.txt**：可能是更简洁的使用指南或者开发者注释，可能包含一些关键的提示和注意事项。 4. **css**：这是一个文件夹，里面可能包含了一组CSS样式文件，用于定义高亮显示的样式，例如背景色、边框、字体颜色...