理论上CSS子选择器比标签选择器更有效.但是当你有一个类并且你需要在这个类元素中设置特定标签的样式但是它们不是一级孩子时会发生什么？ 我们来看一个例子： .styled-table > t
... . . 理论上CSS子选择器比标签选择器更有效.但是当你有一个类并且你需要在这个类元素中设置特定标签的样式但是它们不是一级孩子时会发生什么？
我们来看一个例子：
.styled-table > tbody > tr > td{ // Some cell styles} VS
.styled-table td{ // Some cell styles} 哪一个是更好的CSS性能实践？
.解决方法
. 每 MDN：避免后代选择器.~
.
The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.
.如果您通过逻辑思考,使用后代选择器,CSS引擎将检查父元素的每个子元素(在本例中为.styled-table)查找匹配项(在本例中为td标记),然后检查这些子项的每个子项等等等等.
但是,使用子选择器,您可以准确地告诉引擎要查找匹配的“路径”.如果它无法在路径中的任何位置找到匹配项(例如,如果.styled-table没有tbody作为其直接子项之一),那么它将放弃选择器.
. . .. ...