极客笔记哪些字符是CSS类名/选择器valid的
在CSS中，类名或选择器被用来选择特定的HTML元素。有一些CSS规则用来定义类名或CSS选择器。在这个教程中，我们将学习所有的CSS规则和创建类名的合法字符。
下面是创建CSS类名的规则：
- 规则1 - 类名或CSS选择器只能包含字母、数字和一些特殊字符，如连字符（-）和下划线（_）。
-
规则2 - 类名不能以数字开头。例如，类名“12sd”是无效的。
-
规则3 - 类名和CSS选择器可以包含特殊字符，如’@’、’~’、’:’等，但在CSS中使用类名时需要转义。
-
规则4 - 类名和CSS选择器大小写不敏感。所以，’.TEST’和’.test’是相同的，但’.TEST’会覆盖’.test’类的样式。
-
规则5 - 类名中不能包含空格。
-
规则6 - 类名不能只包含一个连字符（-），也不能以连字符后跟数字开头。例如，以’ -123’作为类名是不起作用的。
以上是在CSS中定义类名的规则。现在，让我们通过下面的示例来理解这些规则。
示例1
在下面的示例中，我们使用字母数字字符创建了div元素的类名。除了以数字开头的’123test’类名之外，所有的类名都是有效的，用户可以在输出中观察到。
此外，’test’类的所有CSS都被’TEST’类的CSS覆盖，这意味着如果类名相同，按照排列顺序优先级最高的类名将覆盖所有其他类的CSS样式。
<html>
<head>
<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>
<body>
<h2>Creating the <i> CSS class names with valid characters. </i></h2>
<div class = "test"> Class name is test. </div>
<div class = "TEST"> Class name is TEST. </div>
<div class = "test123"> Class name is test123. </div>
<div class = "123test"> Class name is 123test. </div>
<div class = "Test456"> Class name is Test456. </div>
</body>
</html>
示例2
在下面的示例中，我们在类名中使用了特殊字符，如下划线和连字符。在此示例中，除了包含单个连字符字符、以连字符开头并后面跟随数字的类名之外，所有类名都是有效的。
以单个下划线或多个下划线开头的类名是有效的。此外，以连字符开头并后跟字母字符的类名始终是有效的。
<html>
<head>
<style>
._ { color: red; font-size: 25px;}
.__ { 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>
<body>
<h2>Creating the <i> CSS class names with valid characters. </i></h2>
<div class = "_"> Class name is '_' </div>
<div class = "__"> Class name is '__' </div>
<div class = "-"> Class name is '-' </div>
<div class = "--"> Class name is '--' </div>
<div class = "-123"> Class name is '-123' </div>
<div class = "-abcd"> Class name is '-abcd' </div>
<div class = "_123"> Class name is '_123' </div>
<div class = "_abcd"> Class name is '_abcd' </div>
<div class = "demo-class"> Class name is 'demo-class' </div>
<div class = "--demo"> Class name is '--demo' </div>
</body>
</html>
示例3
在下面的示例中，我们在类名中使用了特殊字符，如’@’，’#’，’$’等。我们可以在HTML中的类名中添加特殊字符，但是在CSS中使用带有特殊字符的类名会导致错误。因此，我们需要使用 ‘\’ 字符在CSS中转义特殊字符。
在这里，我们使用了各种字符作为类名，并在CSS中使用反斜杠进行了转义。
<html>
<head>
<style>
/* escaping special characters in the class name */
.test\@ { border: 2px solid green; margin: 5px; color: red;}
.test\~ { border: 2px solid blue; margin: 5px; color: green; }
.test\:123 { border: 2px solid red; margin: 5px; color: blue;}
.test\[demo\] { border: 2px solid yellow; margin: 5px; color: black;}
.test\(90\) { border: 2px solid orange; margin: 5px; color: purple;}
.test\% { border: 2px solid pink; margin: 5px; color: brown;}
.test\{ border: 2px solid black; margin: 5px; color: pink;}
.test\# { border: 2px solid pink; margin: 5px; color: black;}
</style>
</head>
<body>
<h2>Creating the <i> CSS class names with valid characters. </i></h2>
<div class = "test@"> Class name is test@. </div>
<div class = "test~"> Class name is test~. </div>
<div class = "test:123"> Class name is test:123 </div>
<div class = "test[demo]"> Class name is test[demo]. </div>
<div class = "test(90)"> Class name is test(90) </div>
<div class = "test%"> Class name is test%. </div>
<div class = "test"> Class name is test$. </div>
<div class = "test#"> Class name is test#. </div>
</body>
</html>
用户学会了定义类名和CSS选择器的规则。此外，我们学会了在定义类名时使用特殊字符，并在CSS中使用反斜杠字符进行转义。