css - テーブルthとtrの2つの要素に同じスタイル。冗長性を回避する方法は？

Question

今私は次のものを持っています：

table th.bordered {
  border: 1px solid red;
}

table td.borderd {
  border: 1px solid red;
}

これを1つのルールにまとめるにはどうすればよいですか？

score 3 · Accepted Answer

Billy の説明は技術的には正しいですが、さらに優れた方法があります。

table .bordered {
  border: 1px solid red;
}

または（テーブル以外で使用したい場合）：

.bordered {
   border: 1px solid red;
}

これら 2 つのうちの 1 つを実行すると、過度に具体的になるのを防ぐことができ、メンテナンスがはるかに簡単になります。

score 2 · Accepted Answer

これを短縮できる可能性があることをビリーの回答に追加したいだけです

table .bordered {
    border: 1px solid red;
}

あるいは

.bordered {
    border: 1px solid red;
}

特異性が問題にならない場合。

クラスが「bordered」の要素を見つけた後、ブラウザは親要素をチェックする必要がないため、パフォーマンスはわずかに向上します。しかし、ほとんどの場合、それは無視できるものです。

クラス名を単に「縁取り」するだけでなく、よりセマンティックにしたい場合もあります。「highlightColumn」や「errorCell」など。たとえば、赤い境界線の代わりにオレンジ色の背景を使用することにした場合や、目的ごとに異なる境界線を使用したい場合に備えて.

score 1 · Accepted Answer

次のように組み合わせるだけです。

table th.bordered, table td.bordered {
  border: 1px solid red;
}

3 に答える 3