CSS速度

这只是一个问题，可以帮助我更好地理解CSS渲染。

让我们说，我们有一百万行。

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>

哪个是将Hello World的字体更改为红色的最快方式？

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }

另外，如果中间的标签中有一个唯一的id是“foo”，那该怎么办？上面哪一个CSS方法是最快的。

我知道为什么这些方法被使用等等，我只是想更好地掌握浏览器的渲染技术，我不知道如何进行一次测试。

更新：
很好的回答Gumbo。
从它的外观来看，在一个常规的网站上做一个标签的完整定义会更快。因为它找到了父母，并缩小搜索每个父母的搜索。

这可能是坏的，因为你会有一个非常大的CSS文件。

解决方法

要记住的两件事情

>这将取决于CSS解析器/渲染引擎：即它从浏览器到浏览器不同。
> CSS真的，真的，真的很快，即使是最慢的人看不会注意到

一般来说，最简单的事情是最快的(如Gumbo很好地说明的)，但是因为我们已经处于这样一个快速的环境中，所以不要以为你应该牺牲清晰度和适当的范围(低特异性就像使所有公共的一样)。只要避免*无论你在哪里可以:)