哪个CSS选择器更好实践？

Question

我想知道哪种选择器更好，为什么？

示例HTML代码

<div class="main">
   <div class="category">
      <div class="product">
      </div>
   </div>
</div>

我们想通过CSS选择器访问.product：

1. .product
2. .main .category .product
3. div.main div.category div.product

我将它们与以下标准进行比较：

• 性能
• 可维护性
• 可读性

我们可能会认为.product在整个页面中都是唯一的。我们可以使用id而不是class，但在这种情况下，我们选择了class属性。

Answer 1

  

我们可能会认为.product在整个页面中都是唯一的。

在性能方面，最佳当然是ID选择器，但由于您使用的是类，.product会排在第二位。

至于可维护性，可读性和语义（还有更多的性能）......

1. .product表示

     

   查找具有类product的所有元素。

   非常容易理解，如果你根据上述假设使用它，几乎与ID选择器相同。

   我想在这种情况下使用类选择器和ID选择器之间的唯一区别是ID选择器强制执行此元素的唯一性，而不仅仅因为发生是一个这样的元素。换句话说，ID选择器的作用是知道文档只有一个这样的唯一元素，而类选择器则没有。

2. .main .category .product表示

     

   查找具有类product的任何元素   它包含在具有类category的任何元素中   它包含在具有类main的任何元素中。

   浏览器的任务是检查这些元素的祖先，如果你只有一个.product，这是多余的。许多浏览器布局引擎evaluate CSS selectors from right to left，与上面将选择器翻译成英文的方式类似。

3. div.main div.category div.product表示

     

   仅查找具有课程<div>的{​​{1}}个元素   仅包含product个<div>个元素的category元素   它们仅包含在具有类<div>的{​​{1}}个元素中。

   除了检查元素的层次结构外，您还希望浏览器仅将main与类div匹配。如果要匹配此类的任何元素，则此选择器将无法按预期工作。

   如果您确定该类只有一个product，并且您只想匹配该元素，那么您可以改用div，但仍然div.product表现得更好。

Answer 2

我不是大师，但我至少可以发表评论 我认为第一种方式很容易：

• 它可以防止CSS遍历DOM树来查找元素，
• 如果编辑任何父元素，则必须编辑CSS选择器。可读性：个人选择，有些人可能喜欢第二种，但大多数人都不会介意

Answer 3

我总是尽量使用最小的选择器，所以我只使用.product（即你的第一个例子）。我认为这也有性能优势，因为浏览器只需要找到标有该单个类的元素，而不是先尝试找到匹配的父级，然后检查是否有一个标有该类的后代等等。

我通常必须使用你提到的其他方法的唯一原因是：

• 我尝试在特定环境下添加特定样式。例如，如果我想加粗所有内部链接（在.internal_link类下），但是如果它们出现在特定的上下文中，也希望它们也加下划线。
• 我需要添加特异性以强制我的规则生效。

最后，如果您假设只有一个标有.product类的元素，那么您最好将其用作ID而不是类。< / p>

Answer 4

所有三个选择器都有不同的含义，应根据需要在不同的地方使用。 性能方面，第一个应该是最好的，因为我们只需要移动DOM一次。 可读性也明智，第二和第三选择器看起来很麻烦，将来很难扩展。

Answer 5

  

  
1. .product
  
2. .main .category .product
  
3. div.main div.category div.product
  

使用上述选择器取决于您网站的复杂程度。

实施例

1. 如果所有这些元素都只使用。第一选择器可以适合。

2. 第二种方式是最佳实践，如果您将其用于多个页面（例如，您将这些元素用于一组产品）。

3. 除非您在其他HTML标签中使用此类名称，否则我不需要第3种方式。

更多提示：Mushu Tricks

Answer 6

第一种方式。产品是最好的，也是最简单的。如果您使用.product，则无需浏览整个文件即可查找所需内容。您也可以在不使用类的情况下使用ID选择器。