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

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 bto的所有情况来"优化"性能a > b,则您将无法在设计之间a和b设计中轻松添加更多层DOM元素,而无需更改CSS.如果不那么具体,可以根据"行为"进行设计.

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

编辑:术语specificitycss-wise的使用不正确,并且算法可能不正确.最好在匹配方面说明.