css - 複数の ID の CSS スタイリング

Question

これの代わりに：

#1 span.error { color: #fff; }
#2  span.error { color: #fff; }

使用する方が良い/速いですか：

#1 span.error, #2 span.error { color: #fff; }

さらに短縮する方法はありますか？

私はアナの答えを受け入れていますが、私にとっては agam360 が最初にターゲットに当たりました。皆さん、ありがとうございました

Answer 1

はい、その方が良いと思います。冗長性を回避し、この状況が何度も発生する場合は、CSS のサイズを大幅に削減できます。

2 つの ID に同じクラスを追加すると、さらに短くなります。何かのようなもの：

<div id="#1" class="myclass">
  <span class="error">error text 1</span>
</div>
<div id="#2" class="myclass">
  <span class="error">error text 1</span>
</div>

そして、次のように書くことができます：

.myclass span.error {
  color: #fff;
}

IDとspan.errorを持つ要素の外側に要素がない場合は#1#2、これをさらに圧縮してspan.error { color: #fff; }

これに加えて、クラスを持つ要素.errorが常に<span>要素である場合、それらは次のようになります.error { color: #fff; }

したがって、どれだけ圧縮できるかは、実際には HTML 構造に依存します。

Answer 2

Depends on the structure of your page.

span.error { color: #fff; } would shorten it more, or if the ancestor is required to be in the rule and follows a pattern you could write something this div[id*='pattern'] span.error. In this example the ancestor is a div that id contains the text "pattern". You can modify it to fit your needs.