Ответ 1
Используйте следующий код:
div:not([foo=''])
{
/* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}
Я хочу привязать элементы div, где атрибут "foo" имеет значение.
<div foo="x">XXX</div>
<div foo="">YYY</div>
Я пробовал этот css, но он не работает:
[foo!='']
{
background: red;
}
Используйте следующий код:
div:not([foo=''])
{
/* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}
:not([foo=''])
{
background: red;
}
Вы можете выбрать первый, используя
[foo = 'x']{
background:red;
}
Одна из проблем с ответом, приведенным выше, заключается в том, что он также будет выбирать элементы, которые вообще не имеют атрибута "foo". Рассматривать:
<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>
div: not ([foo = '']) выберет как первый, так и второй элементы div. Если вы просто хотите, чтобы элементы div имели атрибут foo с пустой строкой, вы должны использовать:
div[foo]:not([foo=''])
В последнем примере, если вы хотите, чтобы все элементы с атрибутом foo отличались от "y" или "z", вы должны использовать:
div[foo]:not([foo='y']):not([foo='z'])
И, конечно, div можно вообще отключить, если выбрать элементы, отличные от div.