CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。

.1番目{
    色: 赤;
}

有効な CSS クラス名は、次のいずれかで始まる必要があります。

• アンダースコア_
•ハッシュ-
• 文字 a - z

その後に別の _ 、 - 、数字、または文字が続きます。

正規表現では、有効な CSS クラス名は次のとおりです。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

また、CSS 標準の記述によると、クラス名がハイフン - で始まる場合、2 番目の文字はアンダースコア _ または文字である必要がありますが、実際のテストでは、上記の 2 つに加えて、さらに別のハイフンを続けることも効果的であることがわかりました。

テストコードと結果は次のとおりです。

<p class="1st">赤色を適用する必要があります</p>
<p class="-1foo">赤色を適用する必要があります</p>
<p class="-_foo">赤色を適用する必要があります</p>
<p class="--foo">赤色を適用する必要があります</p>
<p class="-foo">赤色を適用する必要があります</p>
<p class="foo">赤色を適用する必要があります</p>
.1番目{
  色: 赤;
}
.-1foo {
  色: 赤;
}
.-_foo {
  色: 赤;
}

.--foo {
  色: 赤;
}

.-foo {
  色: 赤;
}
.foo {
  色: 赤;
} 

クラス名の違いによる実際の効果

要約する

上記は、エディターが紹介した CSS クラス名の問題の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。