比如我有如下CSS代码：
3
1002.red {
background-color: red;
}
table {
background-color: yellow;
}
123
123
123
123
解析CSS的时候先找到class="red"，把那个td设置成红色，然后找到table，把table设置成黄色，同时他又能分辨出class="red"那个td，并且不会覆盖它，这是怎么做到的？是不是每个规则都会去看之前解析的规则是否匹配了。
比如有n个dom，m个规则，每个dom都要去从这m个规则中找是否匹配，这个匹配的算法是什么样的呢？会把所有的css规则生成一棵树然后每个dom在树上查找，还是会用其他查找算法呢？这篇文章讲了一些，求高人解惑：http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
其实，没你说的那么复杂，这里就是一个优先级和继承的问题
继承：如果父元素上设置了能用于继承的样式，而子元素上又没定义相同的样式，那么就会直接父元素的，比如像
font-size、background等；有些样式是不能继承的，比如border、padding等；优先级：如果针对同一个元素在样式表中设置了多个选择器操作它时，那么在优先级相同的情况下，最后设置的会覆盖掉前面所有的设置，而且元素本身设置的样式优先级也会高于继承的样式；
说一下优先级的规则：
id选择的优先级为 0 1 0 0class选择的优先级为 0 0 1 0ele选择的优先级为 0 0 0 1这里我只是说了三个常见的优先级，更多优先级规则LZ可以去看看
css权威指南(第二版)；再回到你的问题当中
table设置了背景色，那子元素td会直接继承过来，但是，又针对某一个td设置了一个class="red"，跟据上面的优先级规则，其他td是没有优先级的，只是单纯的继承了table的样式，而class="red的这个td的优先级为0010，固优先级最高，所以应用之；最后补充一句：优先级相加即使大于10也不会向前进一如：
0 0 1 0大于0 0 0 15最简单的方法就是找个开源的代码看一下，比如 webkit。
1、HTML
2、CSS
我上面推荐的博客，都是系列。感兴趣的话，可以顺带着看看其它的文章。
希望对你有帮助。
w3c标准只会告诉要做成这样，用什么算法实现交给了浏览器，比如v8引擎