css - 如何使用包含 ASCII 换行符的值构造 CSS 选择器定位属性？

Question

假设您有包含以下内容的 html:

<div title="aaa"></div>
<div title="example"></div>
<div title="exam
ple"></div> // the enter key has been pressed after the substring "exam" in the title attribute

我知道如果我想选择第二个和第三个 div，我可以使用以下 CSS:

div[title^="exam"] {....}

但是第三个 div 将如何被独占选择？我已经 Codepenned 以下选择器:

div[title="exam\nple"] {...}
div[title="exam\x0Aple"] {...} // line feed ---> hex
div[title="exam\u000Aple"] {...} // line feed ---> unicode 

这些都没有像我预期的那样工作(即，专门选择第三个 div - 根本没有选择任何元素)。

在这种情况下，如何选择一个属性(此处为 title)，其值包含使用 title= 的换行符？ (而不是 title^= 或 title|= 等)

注意 - 我已经阅读了 this发布和this发布背景信息，但我仍然不确定如何完成此操作。

Answer 1

来自 Characters and case - escaped characters ,

backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 character with that number, which must not be zero.

A new line character代码为 U+000A。所以在 CSS 中，您可以将其转义为 \a 或 \00000a。

div[title="exam\a ple"] { font-size: 2em; color: green;}

<div title="aaa">aaa</div>
<div title="example">example</div>
<div title="exam
ple">exam[newline]ple</div>