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

我想定位属性“ foo”具有值的div元素。

<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;
}

http://jsfiddle.net/gsLvuys0/

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

您可以使用选择第一个

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

小提琴

读这个