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？我编写了以下选择器：

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

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

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

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

Answer 1

来自Characters and case - escaped characters，

反斜杠转义允许作者引用他们不能的字符轻松放入文件。在这种情况下，反斜杠后跟最多六个十六进制数字（0..9A..F），代表ISO 带有该数字的10646字符，不得为零。

new line character的代码为U + 000A。因此，在CSS中，您可以将其转义为\00000a或div[title="exam\a ple"] { font-size: 2em; color: green;}。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以使用div[title^="exam\00000a"]并且可以正常使用

Check Here on Codepen

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

2 个答案: