CSS类名/选择器中哪些字符是有效的?

CSS类名/选择器中哪些字符是有效的?

在CSS中,类名或选择器用于选择特定的HTML元素。有一些CSS规则来定义类名或CSS选择器。在本教程中,我们将学习所有CSS规则以及有效的字符来创建类名。

以下是创建CSS类名的规则。

  • 规则1 – 类名或CSS选择器应只包含字母数字字符和一些特殊字符,如连字符(-)和下划线(_)。

  • 规则2 – 类名不能以数字开头。例如,“12sd”类名无效。

  • 规则3 – 类名和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>使用有效字符创建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>

示例2

在下面的示例中,我们在类名中使用了下划线和连字符等特殊字符。在此示例中,除了仅包含一个连字符字符、以连字符开头并后跟数字的类名之外,所有类名都是有效的。

以单个下划线或多个下划线开头的类名是有效的。此外,以连字符开头并后跟字母字符的类名始终有效。

<html>
<head>
   <style>
      ._ { color: red; font-size: 25px;} 
      ._- {color: blue;} 
      .ab-cd {color: green;} 
      .-efg {color: orange;} 
      .abc-_def {color: purple;}
   </style>
</head>
<body>
   <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>
<html>
<head>
   <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>
<body>
   <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中使用反斜杠进行转义。

<html>
<head>
   <style>
      /* 转义类名中的特殊字符 */
      .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>创建有效字符的CSS类名</h2>
   <div class = "test@"> 类名是test@。 </div>
   <div class = "test~"> 类名是test~。 </div>
   <div class = "test:123"> 类名是test:123 </div>
   <div class = "test[demo]"> 类名是test[demo]。 </div>
   <div class = "test(90)"> 类名是test(90) </div>
   <div class = "test%"> 类名是test%。 </div>
   <div class = "test"> 类名是test$。 </div>
   <div class = "test#"> 类名是test#。 </div>
</body>
</html>

用户学习了定义类名和CSS选择器的规则。此外,我们学会了在定义类名时使用特殊字符并在CSS中使用反斜杠进行转义。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程