What characters are valid in CSS class names/selectors?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What characters are valid in CSS class names/selectors?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2023 am 11:13 AM

CSS 类名/选择器中哪些字符有效？

在 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 id="Creating-the-i-CSS-class-names-with-valid-characters-i">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 id="Creating-the-i-CSS-class-names-with-valid-characters-i">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 id="Creating-the-i-CSS-class-names-with-valid-characters-i">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 中的反斜杠字符对它们进行转义。

The above is the detailed content of What characters are valid in CSS class names/selectors?. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.