CSSセレクターでクラスとIDを組み合わせる方法は？

StackOverflow https://stackoverflow.com/questions/1028248

  •  06-07-2019
  •  | 
  •  

質問

次のdivがある場合：

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

アイデアを表現するスタイルを定義する方法はありますか？＆quot; id = 'content' AND class = 'myClass' ＆quot;？

または

のように、どちらか一方に行くだけですか？ 
<div class="content-sectionA">
    Lorem Ipsum...
</div>

または

<div id="content-sectionA">
    Lorem Ipsum...
</div>
役に立ちましたか？

解決

スタイルシート内：

div#content.myClass

編集：これらも役立つ場合があります：

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

そして、あなたの例ごとに：

div#content.sectionA

編集、4年後：これは非常に古く、人々が見つけ続けるので：セレクターでtagNamesを使用しないでください 。 ＃content.myClass は、 div＃content.myClass よりも高速です。tagNameが不要なフィルタリングステップを追加するためです。 必要な場合にのみセレクタでtagNamesを使用してください！

他のヒント

cssの #header .callout と＃header.callout には違いがあります。

これは、「平易な英語」です。 #header .callout ：
IDが header の要素の子孫である、クラス名が callout のすべての要素を選択します。

そして＃header.callout は次を意味します：
header のIDと callout のクラス名を持つ要素を選択します。

詳細は、 cssのトリック

をご覧ください。

まあ一般的にはidが常に一意であるため、idで指定された要素を分類する必要はないはずですが、本当に必要な場合は次のように動作します：

div#content.sectionA {
    /* ... */
}

1つの要素でidとクラスを組み合わせても問題はありませんが、1つのルールで両方で識別する必要はありません。本当にやりたいことができたら：

#content.sectionA{some rules}

他の人が提案したように、IDの前に div は必要ありません。

一般に、その要素に固有のCSSルールにはIDを設定する必要があり、それらはクラスのルールよりも大きな重みを持ちます。クラスによって指定されるルールは、調整が必要なときにいつでも複数の場所で変更したくない複数のアイテムに適用されるプロパティになります。

これは要約すると：

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

理にかなっていますか

CSSでIDとクラスを組み合わせることができますが、IDは一意であることが意図されているため、CSSセレクターにクラスを追加すると、クラスが過剰に修飾されます。

use： tag.id; cssのタグ変数にtag＃class を追加します。

IDはドキュメント全体で一意であると想定されているため、両方に基づいて選択する必要はありません。 class =＆quot; class1 class2＆quot;

を使用して、要素に複数のクラスを割り当てることができます

あなたはすべて間違っていると思います。 ID対クラスは特異性の問題ではありません。論理的にまったく異なる用途があります。

IDは、ページの特定の部分を識別するために使用する必要があります：ヘッダー、ナビゲーションバー、メイン記事、著者の帰属、フッター。

ページにスタイルを適用するには、クラスを使用する必要があります。一般的な雑誌サイトがあるとしましょう。サイトのすべてのページには、同じ要素（ヘッダー、ナビゲーション、メイン記事、サイドバー、フッター）が含まれます。しかし、雑誌にはさまざまなセクションがあります-経済学、スポーツ、エンターテイメント。 3つのセクションの外観を変える必要があります-経済的で保守的でスクエア、スポーツアクション-エンターテイメント、明るく若々しい

そのためにクラスを使用します。 ＃economics-articleと＃sports-articleと＃entertainment-articleのように複数のIDを作成する必要はありません。それは意味がありません。むしろ、.economics、sports、および.entertainmentの3つのクラスを定義してから、それぞれの＃nav、＃article、および#footer IDを定義します。

.sectionA[id='content'] { color : red; }

Doctypeがhtml 4.01の場合は機能しません...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top