后代和直接后代选择者之间的最佳实践/表现

Question

我想知道使用后代选择器或直接后代选择器之间的最佳实践和性能。在下面的HTML中显示的第一种情况中，两个选择器都可以同等地工作，因为只有一个孩子。

<div>
    <p>Foo Bar</p>
</div>

在上面的标记中，div p或div > p是更好的练习/表现吗？

---

在下面的HTML中，有几个子元素。

<div>
    <p>
        <a>
            <span>Foo Bar</span
        </a>
    </p>
</div>

假设所需的目标是范围标记，div span或div > p > a > span是更好的练习/表现吗？

Answer 1

不要考虑CSS性能。这几乎肯定是一个不成熟的优化。如果它现在还不成熟（即：不是真正有意义的性能考虑因素），它将在不久的将来（即：将通过覆盖绝大多数目标人群的浏览器进行优化）。

a b和a > b之间的区别是级别的“特殊性”选择器引擎必须搜索到的b与a匹配的深度}}。虽然这可能会对性能产生影响（对于匹配a b的大量元素），a > b情况可能意味着您将失去设计的灵活性。

在这种情况下，如果您尝试通过将a b的所有情况更改为a > b来“优化”效果，则您将无法在{{1}之间轻松添加更多层DOM元素您的设计中的{}和a，而不会更改CSS。如果不那么具体，可以根据“行为”进行设计。

此外，虽然b（理论上）的工作量少于a > b，但在大多数情况下，在两个级别上明智地使用类都是等效的（即：a b）。

编辑： css明智地使用术语a.x b.y，并且算法可能不正确。最好在匹配方面说明。

Answer 2

在性能方面严格回答，我发现this reference将子选择器排名为比后代选择器更好的性能。

  

  
1. ID，例如#header
  
2. 类，例如.promo
  
3. 类型，例如div
  
4. 相邻的兄弟姐妹，例如h2 + p
  
5. 儿童，例如li > ul
  
6. 后裔，例如ul a
  
7. 环球，即*
  
8. 属性，例如[type="text"]
  
9. 伪类/元素，例如a:hover