CSS の ID とクラスの両方に基づいて要素のスタイルを設定するにはどうすればよいですか?

CSS セレクターでのクラスと ID の組み合わせ

クラス属性と ID 属性の両方に基づいて要素をスタイルする必要がある状況が発生することがあります。一度に 1 つの属性を使用するのは簡単ですが、それらを組み合わせるのは複雑に思えるかもしれません。

次の HTML コードを考えてみましょう:

<div class="sectionA">
<p><strong>次のようなスタイルを定義することは可能ですか?特に「></strong></p>
<p>を持つ div に適用されます」を実現するには 2 つの方法がありますこれ:</p>
<ol><li>
<strong>ID とクラス セレクターを組み合わせて使用​​します:</strong> スタイルシートに次のように記述します:</li></ol>
<pre class="brush:php;toolbar:false">div#content.myClass

この構文は、ルールは、ID 属性値 "content" と class 属性値の両方を持つ

要素に適用されます。 "myClass".

2. 両方の識別子を組み合わせたクラス名を作成します: 別々のクラス属性と ID 属性を使用する代わりに、目的の組み合わせを表す単一のクラス名を作成できます。たとえば、次のように使用できます。

<div class="content-sectionA">
<p>このアプローチでは、ID 属性とクラス属性の両方の機能を組み合わせて、単一の識別子。</p>
<p><strong>注:</strong></p>
<ul>
<li>複数のクラス名または ID セレクターをチェーンして、より具体的な組み合わせを指定できます。</li>
<li>最新のブラウザでは、パフォーマンス上の理由からセレクターでタグ名を使用する必要はありません。ただし、慎重に使用することをお勧めします。</li>
</ul>
</div>