如何使用包含 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

我明白，如果我想 select 用于第二个和第三个 div，我可以使用以下 CSS:

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

但是第三个 div 将如何被专门 select 编辑？我已经编写了以下 select 或：

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

None 其中的一些按我的预期工作（即 select 排他地 div - 根本没有 select 编辑任何元素）。

在这种情况下，select 如何使用 title=[= 为属性（此处为 title）提供包含换行符的值32=] ?（而不是 title^= 或 title|= 等）

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

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 或 [=13=]000a.

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>

Answer 2

也许你可以直接使用 div[title^="exam[=10=]000a"] 并且有效

Check Here on Codepen

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

How to construct CSS selector targeting attribute with value containing an ASCII line feed?

css

css-selectors

linefeed