在属性选择器中转义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>