html - 属性选择器中的转义 HTML 实体

Question

我有类似的代码:

div[data-stuff=""stuff"] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>

但它不起作用。有没有办法在不删除引号的情况下修复它？

Answer 1

在实际字符前放置一个反斜杠以在 CSS 中对其进行转义:

div[data-stuff="\"stuff"] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>

或者如果您不想这样做，只需将您的属性值用单引号而不是双引号括起来:

div[data-stuff='"stuff'] {
	font-style: italic;
}

<div data-stuff="&quot;stuff">Stuff</div>