在 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 中的反斜杠字符对它们进行转义。
以上就是CSS 类名/选择器中哪些字符有效？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » CSS 类名/选择器中哪些字符有效？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
