html - 后代和直接后代选择器之间的最佳实践/性能

Question

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

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

在上面的标记中，div p 或 div > p 哪个更好？

---

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

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

假设所需的目标是 span 标签，div span 或 div > p > a > span 是更好的实践/性能？

Answer 1

不要考虑 CSS 性能。这几乎可以肯定是过早的优化。如果现在还为时过早(即:不是真正有意义的性能考虑)，那将在不久的将来(即:将被涵盖绝大多数目标人群的浏览器充分优化)。

a b 和 a > b 之间的区别在于 “特异性”级别 选择器引擎必须搜索多深才能匹配 b 从 a 开始。虽然这可能会对性能产生影响(对于大量匹配 a b 的元素)，a > b 情况可能意味着您将失去设计的灵 active 。

在这种情况下，如果您试图通过将 a b 的所有情况更改为 a > b 来“优化”性能，您将失去轻松添加更多内容的能力在您的设计中 a 和 b 之间的 DOM 元素层，而无需大量更改您的 CSS。让它不那么具体允许您根据“行为”进行设计。

此外，虽然 a > b(理论上)比 a b 做的工作少，但在大多数情况下，在两个级别上明智地使用类是等效的(即:a.x b.y).

编辑 术语specificity css-wise 的不正确使用，并且可能在算法上不正确。最好在匹配方面进行说明。