这些 CSS 中的哪一个更有效地实现了预期的结果？

Question

浏览器阅读以下哪项所需的时间更少？还有我可以做的任何其他微优化吗（当然除了消除空格）？

选项 1：

        ol.red-numbers > li:before { color: #A71930; padding-right: 5px; }
        ol.red-numbers > li:nth-of-type(1):before { content: "1"; }
        ol.red-numbers > li:nth-of-type(2):before { content: "2"; }
        ol.red-numbers > li:nth-of-type(3):before { content: "3"; }

选项 2：

        ol.red-numbers > li:nth-of-type(1):before { color: #A71930; padding-right: 5px; content: "1"; }
        ol.red-numbers > li:nth-of-type(2):before { color: #A71930; padding-right: 5px; content: "2"; }
        ol.red-numbers > li:nth-of-type(3):before { color: #A71930; padding-right: 5px; content: "3"; }

Answer 1

..are there any additional micro-optimizations that I can make?

由于您是根据索引选择元素，并为它们提供相应的 content 值，因此您可以使用 counter-increment 自动执行此操作，假设此模式是线性的（因为您 CSS 建议):

ol {
    list-style-type: none;
    counter-reset: item 0;
}
ol > li {
    counter-increment: item;
}
ol.red-numbers > li:before {
    content: counter(item) " pseudo-element ";
    color: #A71930;
    padding-right: 5px;
}

<ol class="red-numbers">
    <li>List</li>
    <li>List</li>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ol>

Answer 2

Steve souders.Check 在这篇文章中做了广泛的分析

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/.

The biggest surprise is how small the delta is from the baseline to the most complex, worst performing test page. The average slowdown across all browsers is 50 ms.

所以我想实际上这无关紧要。

这些 CSS 中的哪一个更有效地实现了预期的结果？

Which of these pieces of CSS is more efficient for achieving the desired result?

css

browser

optimization

performance