轉義 CSS 類選擇器中的字符

Question

我正在嘗試在 CSS 類選擇器中實現字符轉義的W3描述。

我遇到了abc\20 def語法的問題，該語法在轉義序列后放置一個空格以確保def不會被誤讀為字符代碼的一部分。

具體來說，嘗試將abc\XY def放入 HTML 類屬性或類似jQuery().addClass('abc\\20 def')的命令中（這里的\\是 JS 字符串文字語法的一部分；字符串值本身有一個斜杠）都會給元素兩個類， abc\20和def 。

這種語法是否實施得很糟糕，我應該堅持使用六位數前導零形式嗎？ 或者該文檔是否僅引用 CSS 代碼中的轉義格式，而 HTML 屬性/jQuery 參數需要某種不同形式的轉義空格字符？

編輯：非常感謝大家的解釋！

我現在明白這種語法只適用於 CSS 代碼——不適用於 HTML 屬性或 Javascript 中設置的類名本身。

這也意味着指定為空白的字符不能出現在 CSS 類值中，並且沒有一種轉義機制允許添加它們。 （具體來說，如果我理解正確的話，CSS 選擇器.abc\20 def是有效的並且選擇具有類abc def的元素，但是沒有意義因為沒有元素可以有這個類。）

對於涉及將任意值（可以有空格）映射到有效類名的具體用例，我需要定義自己的轉義方案。 用-或_替換空格（感謝 Praveen）是一種可能性； 如果映射需要一對一，則將它們替換為六位 Unicode 十六進制值（例如， "abc def" -> "abc\000020def"是一種更可靠的方法。

要記住的重要一點是，這種替換會影響類名本身——要在 CSS 中引用類abc\000020def ，必須再次轉義反斜杠，以形成選擇器.abc\\000020def 。

Answer 1

簡短回答：DOM 將您傳遞給它的任何選擇器解析為字符串。 如果（由 DOM 解析）結果包含空格或不間斷空格，它們將算作類分隔符。

---

您不必擔心 jQuery 或任何其他 ECMAScript 會將用於結束轉義塊的空格誤解為類定界符。

簡單的說，因為他們不負責這個匹配。 文檔對象模型是。 解釋轉義 CSS 類的相同 DOM。 因此，如果轉義的類名在您的樣式表中有效，那么如果通過任何 JavaScript 庫傳遞，它將作為選擇器使用。

在一個條件下：它以它理解的形式傳遞給 DOM。 一種適用於 CSS的表單。

現在，假設出於語義原因，您希望100%地在元素上使用類。 您至少需要轉義第一個和最后一個字符，您的選擇器才能工作。 中間的可能會或可能不會被轉義。 可能的選擇器，全部在 DOM 級別轉換為100%類名，將是：

• .\31 00\25
• .\31 0\30\25
• .\31\30 0\25
• .\31\30\30\25
• .\31 \30 \30 \25

如您所知，還有更多轉義 CSS 方法。 然而，這適用於所有人。

當您將選擇器傳遞給 jQuery 或 JavaScript 時，它會將其視為字符串並將其傳遞給 DOM 解析器。 然而，這些庫有自己的轉義機制，允許我們做一些奇特的事情。 因此，要允許上述任何選擇器進入 DOM 解析器，您需要對反斜杠進行轉義，這樣它們就不會被 JavaScript 誤解為轉義字符並從字符串中刪除。

基本上你需要加倍你的反斜杠。 以下任何一項都可以：

• .\\31 00\\25 ,
• .\\31 0\\30\\25 ,
• .\\31\\30 0\\25
• .\\31\\30\\30\\25
• .\\31 \\30 \\30 \\25

這是一個片段。 測試一下。 添加類0%的元素，您將看到它們未被選中。 因為 DOM 解析器會將上述任何選擇器轉換為100% ，並將它們與您放入元素的100%類進行匹配。

 $('.\\31\\30\\30\\25>div').on('click', function(){ var positions = ['first','second','third']; alert('You clicked the ' + positions[$(this).index()] + ' div.'); })

 .\31 0\30\25 > div{ padding: 20px; }.\31 00\25 > *:first-child { color: red; }.\31\30 0\25 > *:nth-child(2) { color: blue; }.\31\30\30\25 > *:last-child { color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="100%"> <div>first</div> <div>second</div> <div>third</div> </div>

---

回到您的示例（ abc\\20 def ），它將解析並表現得與abc def完全一樣。 空格，當出現在類名字符串的最終結果中時，將被解釋為類分隔符。 這適用於\x20和\xa0 （空格和不間斷空格），這是預期的行為。

作為一個有趣的（微不足道的）說明，如果出於某種邪惡的原因你想讓人們很難設計你的應用程序，你總是可以在類名中添加一個command類型字符。 這是一個例子：

 $('.space').removeClass('\x73\x70\x61\x63\x65').addClass('\x1a\x73\x70\x61\x63\x65');

 .space { color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="space"> inspect me, i should be red! </div>

Answer 2

您對 DOM 中存在的類名和 CSS 中所需的轉義版本感到困惑。 類名只是按原樣指定：

elt.classList.add('foo:bar')

當它在 CSS 文件（或其他 CSS 選擇器上下文，例如querySelector ）中被引用時，它必須被轉義：

.foo\:bar { color: red; }

這同樣適用於您選擇使用數字轉義的情況：

elt.classList.add('1234');

.\31 234 { color: red; }

但是，再多的轉義也不允許您在類名中包含空格。 空格絕對保留用於分隔 DOM className屬性上的多個類名。

Answer 3

我想你可以使用class="abc def"來解決這個問題