CSS類選擇器中允許哪些字符/符號？

我知道下面的字符是無效的，但是什么字符是有效的呢？

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

可以直接查看CSS語法。

基本上，名稱必須以下劃線(_)、連字符(-)或字母(a–z)開頭，后跟任意數量的連字符、下劃線、字母或數字。有一個條件:如果第一個字符是連字符，第二個字符必須是字母或下劃線，并且名稱必須至少有2個字符長。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

簡而言之，前面的規則轉化為以下內容，摘自W3C規范:

在CSS中，標識符(包括元素名、類和 選擇器)只能包含字符

我的理解是下劃線在技術上是有效的。檢查:

https://developer . Mozilla . org/en/下劃線_in_class_and_id_names

"...2001年初發布的規范勘誤表首次將下劃線合法化。

上面鏈接的文章說永遠不要使用它們，然后給出了一個不支持它們的瀏覽器列表，所有這些瀏覽器，至少在用戶數量方面，都是長期冗余的。

我們可以在類名中使用所有字符。甚至像#和這樣的字符..我們只需要用\(反斜杠)來轉義它們。

.test\.123 {
  color: red;
}

.test\#123 {
  color: blue;
}

.test\@123 {
  color: green;
}

.test\<123 {
  color: brown;
}

.test\`123 {
  color: purple;
}

.test\~123 {
  color: tomato;
}

<div class="test.123">test.123</div>
<div class="test#123">test#123</div>
<div class="test@123">test@123</div>
<div class="test<123">test<123</div>
<div class="test`123">test`123</div>
<div class="test~123">test~123</div>

對于HTML5和CSS 3，類和id可以以數字開頭。

根據Kenan Banks的回答，您可以使用以下兩個正則表達式匹配來使字符串有效:

[^a-z0-9A-Z_-]

這是一個反向匹配，選擇除字母、數字、破折號或下劃線以外的任何內容，以便于刪除。

^-*[0-9]+

這與字符串開頭的0或1破折號后跟1或多個數字相匹配，也是為了便于刪除。

我如何在PHP中使用它:

// Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);

// Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);

// Make sure the string is two or more characters long
return 2 <= strlen($class) ? $class : '';