找不到“不相等”的 css 属性选择器

小开

:not([foo=''])
{
background: red;
}

小开

您可以使用

[foo = 'x']{
background:red;
}

小开

最佳答案

像这样使用代码:

div[foo]:not([foo=''])
{
/* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

小开

接受的答案的一个问题是，它还将选择根本不具有 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'])

小开

顺便说一下，如果你想选择除了具有特定值的元素之外的所有具有特定属性的元素，你可以这样做:

[data-foo]:not([data-foo="foo"]) {
/* matches <div data-foo="bar"> but not <div data-foo="foo"> or <div> */
}