无法找到＆＃34;不等于＆＃34; css属性选择器

Question

我想将div元素作为属性＆＃34; foo＆＃34;有价值。

<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

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

http://jsfiddle.net/gsLvuys0/

Answer 3

您可以使用

选择第一个

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

FIDDLE

Read this

Answer 4

上述答案的一个问题是，它还将选择根本没有“ 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元素。如果只需要将foo属性设置为空字符串的div元素，则应使用：

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

最后一个示例，如果希望所有具有属性foo而不是“ y”或“ z”的元素，则应使用：

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

当然，如果选择除div之外的其他元素，则可以完全取消div。

Answer 5

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

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