dom是如何与css规则匹配的？
比如我有如下CSS代码：
.red {
background-color: red;
}
table {
background-color: yellow;
}
<table>
<tr>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>123</td>
<td class="red">123</td>
</tr>
</table>解析CSS的时候先找到class="red"，把那个td设置成红色，然后找到table，把table设置成黄色，同时他又能分辨出class="red"那个td，并且不会覆盖它，这是怎么做到的？是不是每个规则都会去看之前解析的规则是否匹配了。
比如有n个dom，m个规则，每个dom都要去从这m个规则中找是否匹配，这个匹配的算法是什么样的呢？会把所有的css规则生成一棵树然后每个dom在树上查找，还是会用其他查找算法呢？
写回答
-
其实，没你说的那么复杂，这里就是一个优先级和继承的问题
继承：如果父元素上设置了能用于继承的样式，而子元素上又没定义相同的样式，那么就会直接父元素的，比如像 font-size、background等；有些样式是不能继承的，比如border、padding等；
优先级：如果针对同一个元素在样式表中设置了多个选择器操作它时，那么在优先级相同的情况下，最后设置的会覆盖掉前面所有的设置，而且元素本身设置的样式优先级也会高于继承的样式；
说一下优先级的规则：
id选择的优先级为 0 1 0 0
class选择的优先级为 0 0 1 0
ele 选择的优先级为 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
2019-07-17 19:15:23赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
