logo标签列表

是否有一个CSS选择器用于选择没有属性的元素？

htmlcsscss-selectors
69

我了解CSS规则可以针对指定属性值的元素进行定位，例如：

input[type="text"] {}

我可以制定一个规则来针对那些省略某些属性的元素吗？例如，我可以针对没有 href 属性的元素或没有指定 type 属性的元素吗？

4个回答
113
您可以按照这个模式进行操作：
a:not([href])
input:not([type])

属性选择器用于选择具有指定属性的元素。

:not在所有现代浏览器和IE9+中都受支持，如果需要IE8或更低版本的支持，则无法实现。

这里有一个演示，供好奇者参考：http://jsfiddle.net/Z2sHD/2/ 顺便说一句：如果我错了，请纠正我，但是<a>标签必须要有href属性才能算是有效的HTML。 - Wesley Murch
6
@Wesley，它并不是指a元素简单地只能是一个锚点，而是可以只包含name属性。 - Einacio
啊，是的，没错。不确定我从哪里得到那个想法。我想我完全在想其他事情。 - Wesley Murch
值得注意的是，可以选择仅包含无（自定义）属性的所有元素。在想了一会儿之后，我终于想到了显然的答案。虽然你不能像 foo:not(foo[*]){ color: red; } 这样做，但你可以使用标准的 CSS 级联，如 foo{ color: red; } foo[green]{ color: green; } foo[blue]{ color: blue; } 来定义一个“默认”值。这有一个很好的副作用，即使任何其他/未识别的值都会回退到默认值，而不是定义像 foo[normal],foo[default]{ color:red; } 这样的东西。 - Beejor
2
我找到的唯一有效的解决方法是在我的代码中添加a:link { }。
我还尝试过： a:not([href]) input:not([href=""]) input:not([href~=""]) 但对于使用多个a标签作为标准代码块（不是我的想法）的.scss文件，这是唯一的解决方案。
1

对于链接，您可以简单地使用：

a { color: red; }
a:link { color: green; }

fiddle: http://jsfiddle.net/ZHTXS/ 不需要使用JavaScript。

对于表单属性，请使用上面提到的非属性模式input:not([type])，如果您需要支持旧版本的IE，则可能需要添加一个类并使用与条件注释链接的IE特定样式表。

2
虽然这是一个聪明的锚点答案，但只适用于锚点。 - animuson
1
正如我在下面的答案中所述，这只对锚点有用。虽然标题可能会指出锚点，但OP指定了所有元素，甚至包括一个输入示例。 - animuson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接