36

HTMLクラス属性について、CSSクラス（または複数のクラス？）をタグに割り当てます。のようなスペースの使用

<tag class="a b">....</tag>

有効ですか？

この構文は、一部のWebデザイナーによって使用され、Adobe InDesignのエクスポートされたHTML（バージョン5および6でテスト済み）および別のHTML生成ソフトウェアで使用されます...

それ（class="a b"）は有効なW3C構文ですか？ CSSとHTMLのどのバージョンですか？（どのバージョンから有効になりましたか？）

編集：自然なサブ質問「W3Cはそれをどのように解釈するかを言う？」（これは「オーバーライド」または別のレンダリング動作ですか？）ここに投稿されました。

4

4 に答える 4

47

これらは2つの異なるクラスであり、スペースで区切られていますa。w3cDOCSbを参照してください

class = cdata-list [CS]

この属性は、クラス名またはクラス名のセットを要素に割り当てます。任意の数の要素に同じクラス名を割り当てることができます。複数のクラス名は空白文字で区切る必要があります。

2つのクラスがある場合

.a { font-weight: bold; }
.b { font-weight: normal; }

class ="ab"またはclass="b a"で割り当てると、後のクラスが同じプロパティを持つ前のクラスを上書きするため、フォントの太さは通常になります。

CSS定義の順序を変更すると、

.b { font-weight: normal; }
.a { font-weight: bold; }

現在、後のクラスは太字であるため、「同じプロパティを持つ前のクラスを上書きする」と、フォントの太さは太字になります。

于 2012-12-10T20:41:36.243 に答える
4

これは、IE 7以降でサポートされており、すべての最新の非IEブラウザーが含まれます。他のコメント提供者が指摘しているように、これは実際にはクラスのリストであり、スペースを含む単一のクラスではありません。

これを理解するためのより良い方法は、例にさらにいくつかのオプションを与えることです。

<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>

.a.b {}cssで最初のタグをターゲットにします。
.a {}1番目と2番目のタグをターゲットにします。
.b {}1番目と3番目のタグをターゲットにします。

これが、1つの要素で複数のクラスを使用すると非常に役立つ場合がある理由です。

CSSセレクターと疑似セレクターの質問については、この（少し古い）テーブルhttp://kimblim.dk/css-tests/selectors/を使用するのが好きです。

于 2012-12-10T21:15:34.977 に答える
3

単一のクラス名にスペースを含めることはできません。要素は、スペースで区切られたクラス名をリストすることによって定義された複数のクラスを持つことができます

于 2012-12-10T20:43:35.650 に答える
1

これは、CSSファイルまたはHTMLでは機能しません。 <div class="a b c"></div>div要素がクラスaANDクラスbANDクラスcを持っていることを意味します。

一方、スタイルシート側では、.a b c { property: value; }文字通り「クラスaを持つ祖先を持つ要素c」（およびbとcは明らかに有効なHTML要素ではない）を.a .b .c { property: value; }意味するため無効ですが、「祖先を持つクラスcを持つ要素」を意味しますクラスbを持つ要素とクラスa"を持つ祖先要素。これが意味をなさない場合は、CSSの特異性ルールを調べてください。

スペースの代わりにダッシュまたはアンダースコアを使用してください。

于 2012-12-10T20:45:15.993 に答える