Detaillierte Erklärung zum Problem der CSS-Klassennamen

Die folgenden CSS-Klassennamen, die mit einer Zahl beginnen, haben keinen Effekt:

.1.{
    Farbe: rot;
}

Ein gültiger CSS-Klassenname muss mit einem der folgenden Elemente beginnen:

• Unterstrich_
• Hash-
• Buchstaben a - z

Dann folgt ein weiteres _, -, eine Zahl oder ein Buchstabe.

In regulären Ausdrücken ist ein gültiger CSS-Klassenname:

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

Darüber hinaus muss gemäß der Beschreibung im CSS-Standard das zweite Zeichen ein Unterstrich _ oder ein Buchstabe sein, wenn der Klassenname mit einem Bindestrich - beginnt. Tatsächliche Tests haben jedoch ergeben, dass neben den beiden genannten auch das Folgen eines weiteren Bindestrichs wirksam ist.

Nachfolgend sind die Testcodes und Ergebnisse aufgeführt:

<p class="1st">sollte rote Farbe anwenden</p>
<p class="-1foo">sollte rote Farbe anwenden</p>
<p class="-_foo">sollte rote Farbe anwenden</p>
<p class="--foo">sollte rote Farbe anwenden</p>
<p class="-foo">sollte rote Farbe anwenden</p>
<p class="foo">sollte rote Farbe anwenden</p>
.1. {
  Farbe: rot;
}
.-1foo {
  Farbe: rot;
}
.-_foo {
  Farbe: rot;
}

.--foo {
  Farbe: rot;
}

.-foo {
  Farbe: rot;
}
.foo {
  Farbe: rot;
} 

Tatsächliche Auswirkungen unterschiedlicher Klassennamen

Zusammenfassen

Oben finden Sie eine ausführliche Erklärung des vom Herausgeber eingeführten CSS-Klassennamenproblems. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!