Detailed explanation of the problem of CSS class names

The following CSS class names starting with a number will not take effect:

.1st{
    color: red;
}

A valid CSS class name must start with one of the following:

• Underscore_
•Hash-
• Letters a - z

Then followed by another _ , - , number or letter.

In regular expression, a legal CSS class name is:

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

In addition, according to the description in the CSS standard, if the class name starts with a hyphen - , the second character must be an underscore _ or a letter, but actual testing has found that in addition to the two mentioned, following another hyphen is also effective.

The following are the test codes and results:

<p class="1st">should apply red color</p>
<p class="-1foo">should apply red color</p>
<p class="-_foo">should apply red color</p>
<p class="--foo">should apply red color</p>
<p class="-foo">should apply red color</p>
<p class="foo">should apply red color</p>
.1st {
  color: red;
}
.-1foo {
  color: red;
}
.-_foo {
  color: red;
}

.--foo {
  color: red;
}

.-foo {
  color: red;
}
.foo {
  color: red;
} 

Actual effects of different class names

Summarize

The above is a detailed explanation of the CSS class name problem introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!