CSS:为了速度/准确性，指定特定元素的确切路径很重要吗

Question

当为特定元素定义CSS时，当我们谈论网页的速度/准确性/处理时，指定确切路径有什么不同吗？

例如，如果我在表格的第三列中有文本输入ONLY，哪一个对速度、准确性、处理和其他参数更好？

选项1:

table input[type="text"]
{
    background:yellow;
}

选项2:

table td:nth-child(3) input[type="text"]
{
    background:yellow;
}

Answer 1

不，添加更多的复合选择器只会让浏览器有更多的元素需要检查，从而有更多的工作要做。

如果输入只会出现在特定的位置，并且您可以保证它们永远不会出现在给定页面的其他任何地方，那么无论您使选择器在input[type="text"]之外多么精确，都是无关紧要的，因为它总是以相同的元素集为目标。您添加的任何额外检查都将成为多余的。

但真正的问题是，性能在这里是否重要。除非你有成千上万这样的元素，否则答案很可能是否定的。尽可能具体。如果你需要上下文选择器来确保你不会意外地瞄准错误的元素，那么把它们放进去是没有害处的。