> 웹 프론트엔드 > CSS 튜토리얼 > CSS 클래스 이름/선택기에는 어떤 문자가 유효합니까?

CSS 클래스 이름/선택기에는 어떤 문자가 유효합니까?

WBOY
풀어 주다: 2023-09-03 11:13:02
앞으로
837명이 탐색했습니다.

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>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 클래스 이름/선택기에는 어떤 문자가 유효합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
이전 기사:CSS Grid-auto-columns 속성 사용 다음 기사:CSS의 Flexbox 속성을 사용하여
를 중앙에 배치하는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿