css - element.class { ... } と .class { ... } だけを指定するとパフォーマンスが向上しますか?

Question

特定のクラスが div または p でのみ使用されることがわかっている場合、.class の代わりに div.class または p.class を指定することでパフォーマンスにわずかな影響がありますか?

Answer 1

これを自分でテストすることに興味がある場合は、Steve Souders の「CSS Test Creator」を使用して、さまざまな CSS セレクターの速度をテストできます。

http://stevesouders.com/efws/css-selectors/csscreate.php

.class両方をテストし、 a.class10,000 のルールと 10,000 のアンカーを使用しました。各テストを 5 回実行すると、次の結果が得られました。

+----------+-----------+----------+
|  Test #  |  a.class  |  .class  |
+----------+-----------+----------+
|    1     |  2915 ms  |  2699 ms |
|    2     |  3021 ms  |  2869 ms |
|    3     |  2887 ms  |  3033 ms |
|    4     |  2990 ms  |  3035 ms |
|    5     |  2987 ms  |  2980 ms |
+----------+-----------+----------+
|  AVERAGE |  2960 ms  |  2923 ms |
+----------+-----------+----------+

ご覧のとおり、.classはわずかに高速ですが、それほど重要ではありません (10,000 要素で 37 ミリ秒)。ただし、overを使用する理由があり、それは柔軟性です。後で要素に変更する多数の要素がある場合、ルールを使用していた場合は CSS を変更する必要があります。を使用した場合、CSS の更新は必要ありません。.classtag.class<div class="content"><section class="content">div.content.content

一般にtag.class、同じクラスを使用する複数のタグ タイプがあり、特定のタグ タイプのみをターゲットにしたい場合にのみ、スタイル セレクターを使用します。

Answer 2

はい、.classよりわずかに高速ですelement.class。これは、CSS が左から右に読み取られるためです。つまり、.class("" というクラス名を持つすべての要素に一致.class) をelement.class意味し、("" というクラス名を持つすべての要素に一致.class "element ) を意味します。

ただし、element.classよりも特異度が高くなります.class。

Answer 3

これが問題ではないことはわかっていますが、具体性に影響するため、以下の例では、含まれている tds を innerClassFails がオーバーライドしていませんが、table.innerClass はそれをオーバーライドしています。

<style>
table.outerClass td {
    color: red;
}

table.innerClass td {
    color: green;
}

.innerClassFails td {
    color: green;
}
</style>
<table class='outerClass'><tr><td><table class='innerClass'><tr><td>Hello!</td></tr></table></td></tr></table>

<table class='outerClass'><tr><td><table class='innerClassFails'><tr><td>Hello!</td></tr></table></td></tr></table>