CSS类名/选择器中哪些字符是有效的？
在CSS中，类名或选择器用于选择特定的HTML元素。有一些CSS规则来定义类名或CSS选择器。在本教程中，我们将学习所有CSS规则以及有效的字符来创建类名。
以下是创建CSS类名的规则。
规则1
– 类名或CSS选择器应只包含字母数字字符和一些特殊字符，如连字符（-）和下划线（_）。
规则2
– 类名不能以数字开头。例如，“12sd”类名无效。
规则3
– 类名和CSS选择器可以包含特殊字符，例如’@’、’~’、’:’等，但在使用类名时需要进行转义。
以上是CSS中定义类名的规则。现在，让我们通过下面的示例来理解它。
在下面的示例中，我们使用字母数字字符创建了div元素的类名。所有的类名都是有效的，除了’123test’类名，因为它以数字开头，用户在输出中可以观察到。
此外，所有’TEST’类的CSS都被’TEST’类的CSS覆盖，这意味着如果类名相同，则按照排序顺序最高优先级的类名将覆盖所有其他类的CSS。
<style>
.test { color: red; font-size: 30px;}
.TEST { color: green; font-size: 30px;}
.test123 {color: blue; font-size: 30px;}
.123test { color: yellow; font-size: 30px;}
.Test456 { color: orange; font-size: 30px; }
</style>
</head>
<h2>使用有效字符创建CSS类名。</h2>
<div class = "test"> 类名为test。 </div>
<div class = "TEST"> 类名为TEST。 </div>
<div class = "test123"> 类名为test123。 </div>
<div class = "123test"> 类名为123test。 </div>
<div class = "Test456"> 类名为Test456。 </div>
</body>
</html>
在下面的示例中，我们在类名中使用了下划线和连字符等特殊字符。在此示例中，除了仅包含一个连字符字符、以连字符开头并后跟数字的类名之外，所有类名都是有效的。
以单个下划线或多个下划线开头的类名是有效的。此外，以连字符开头并后跟字母字符的类名始终有效。
<style>
._ { color: red; font-size: 25px;}
._- {color: blue;}
.ab-cd {color: green;}
.-efg {color: orange;}
.abc-_def {color: purple;}
</style>
</head>
<h2>使用特殊字符创建CSS类名。</h2>
<div class = "_"> 类名为_。 </div>
<div class = "_-"> 类名为_-。 </div>
<div class = "ab-cd"> 类名为ab-cd。 </div>
<div class = "-efg"> 类名为-efg。 </div>
<div class = "abc-_def"> 类名为abc-_def。 </div>
</body>
</html>
<style>
/* 用有效字符创建CSS类名 */
.__ { color: green; font-size: 25px;}
.- { color: blue; font-size: 25px;}
.-- { color: yellow; font-size: 25px;}
.-123 { color: orange; font-size: 25px;}
.-abcd { color: purple; font-size: 25px;}
._123 { color: brown; font-size: 25px;}
._abcd { color: pink; font-size: 25px;}
.demo-class { color: aqua; font-size: 25px;}
.--demo {color: gray; font-size: 25px;}
</style>
</head>
<h2>创建有效字符的CSS类名 </i></h2>
<div class = "_"> 类名是 '_' </div>
<div class = "__"> 类名是 '__' </div>
<div class = "-"> 类名是 '-' </div>
<div class = "--"> 类名是 '--' </div>
<div class = "-123"> 类名是 '-123' </div>
<div class = "-abcd"> 类名是 '-abcd' </div>
<div class = "_123"> 类名是 '_123' </div>
<div class = "_abcd"> 类名是 '_abcd' </div>
<div class = "demo-class"> 类名是 'demo-class' </div>
<div class = "--demo"> 类名是 '--demo' </div>
</body>
</html>
在下面的示例中，我们在类名中使用了特殊字符，例如“@”，“#”，“$”等。我们可以在HTML中将特殊字符添加到类名中，但是在CSS中使用带有特殊字符的类名会出错。因此，我们需要使用反斜杠转义CSS中的特殊字符。
在这里，我们在类名中使用了各种字符，并在CSS中使用反斜杠进行转义。
