找不到"不等于"的css属性选择器

Question

我想要定位属性"foo"具有值的div元素.

<div foo="x">XXX</div>
<div foo="">YYY</div>

我试过这个css,但它不起作用:

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

Answer 1

使用这样的代码:

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

Answer 2

接受的答案的一个问题是它还会选择根本没有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元素。如果您只想要将divfoo 属性设置为空字符串的元素，则应使用：

div[foo]:not([foo=''])

如果你想要所有属性foo不是y也不是 的元素z，你应该使用：

div[foo]:not([foo='y']):not([foo='z'])

Answer 3

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

http://jsfiddle.net/gsLvuys0/

Answer 4

顺便说一句，如果您尝试选择具有特定属性的所有元素（除了具有特定值的元素之外），您可以执行以下操作：

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