标签 css css-selectors
<分区>
我想知道哪个选择器更好，为什么？
示例 HTML 代码
<div class="main">
<div class="category">
<div class="product">
</div>
</div>
</div>
我们希望通过 CSS 选择器访问 .product:
.product.main .category .productdiv.main div.category div.product我将它们与以下标准进行比较:
我们可以假设 .product 在整个页面中是唯一的。我们可以使用 id 而不是 class，但在这种情况下，我们选择了 class 属性。
最佳答案
We may assume that
.productis unique throughout the page.
就性能而言，最佳 当然是 ID 选择器，但由于您使用的是类，.product会排在第二位。
至于可维护性、可读性和语义(还有更多关于性能的内容)...
.product意味着
Find any elements that have a class
product.
非常容易理解，如果您基于上述假设使用它，几乎与 ID 选择器相同。
我想在这种情况下使用类选择器和 ID 选择器之间的唯一区别是 ID 选择器强制此元素的唯一性，而不仅仅是因为 碰巧 有一个这样的元素.换句话说，ID 选择器根据文档将只有一个这样的唯一元素的知识来操作，而类选择器则没有。
.main .category .product意味着
Find any elements that have a class
product
which are contained in any elements that have a classcategory
which are contained in any elements that have a classmain.
浏览器的任务是检查这些元素的祖先，如果你只有一个 .product，这是多余的.许多浏览器布局引擎evaluate CSS selectors from right to left ，类似于我将选择器翻译成英文的方式。
div.main div.category div.product意味着
Find only
<div>elements that have a classproduct
which are contained in only<div>elements that have a classcategory
which are contained in only<div>elements that have a classmain.
除了检查元素的层次结构之外，您还希望浏览器只匹配 div。同类product .如果您想匹配此类的任何 元素，则此选择器将无法按预期工作。
如果您确定只有一个 div与那个类，你只想匹配那个元素，那么你可以使用 div.product相反，但是 .product仍然表现得更好。
关于css - 哪个 CSS 选择器是更好的做法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4458273/