資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究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 中使用反斜槓字元對其進行轉義。
2K+ 次瀏覽
