Сбежавшие HTML Entities в селекторы атрибутов

Question

У меня есть код, подобный этому:

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

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

Но это не работает. Есть ли способ исправить это, не удаляя отметку кавычки?

Answer 1

Поместите обратную косую черту перед фактическим характером, чтобы избежать его в CSS:

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

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

Или, если вы не хотите, чтобы сделать это, просто обернуть значение атрибута в одинарные кавычки вместо двойных кавычек:

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

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