CSS属性选择器:如何在属性值中转义换行符？

您拥有的选择器不起作用的原因:

a[href="\
    http://google.com\
"]

是因为:

首先,在字符串内部,将忽略后跟换行符的反斜杠(即,该字符串被视为不包含反斜杠或换行符).在字符串之外,反斜杠后跟换行符代表自己(即DELIM后跟换行符).

这在上面第4.1.3节中引用的段落中提到,为什么它表示换行是无法使用反斜杠转义的字符之一.

这使它等同于以下选择器:

a[href="    http://google.com"]

如果其属性值不包含任何换行符,则只匹配您的元素.

这就是说,它是实际上可能通过包含换行符的属性值给一个元素相匹配.但是,CSS使这有点复杂:

要在CSS字符串中表示换行符,您需要使用\a转义序列(不区分大小写,最多6个十六进制数字).这在4.3.7节中描述了关于字符串(无论是在属性值还是属性选择器中都被视为相同):

字符串不能直接包含换行符.要在字符串中包含换行符,请使用表示ISO-10646(U + 000A)中换行符的转义符,例如"\ A"或"\ 00000a".此字符表示CSS中"newline"的一般概念.

\nCSS中没有特殊含义; 事实上,它是一样的n.

如果空格直接跟在转义序列之后,例如\a,该空格必须加倍,以便可以消耗直接跟随转义序列的空格字符.再次参阅4.1.3节,其中说明:

在十六进制转义后,只会忽略一个空格字符.请注意,这意味着转义序列之后的"真实"空格必须加倍.

这可能就是为什么你甚至不能让它工作的原因\a.可以理解,这是一个令人难以置信的模糊规则,尤其是在处理空白字符时.

这会产生以下选择器,正确应用样式:

a[href="\a     http://google.com\a"]

请注意,第一个和URL 之间有五个空格字符\a,而相比之下,HTML中的换行符后面只有四个空格.