html - CSS选择第一个没有类的元素

Question

我有几个<div>s，其中一些有class: hidden，像这样：

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div>

我知道要选择第一个<div>没有class: hidden. 到目前为止，我一直在尝试CSS：div:not(.hidden):first-child但它不起作用。

如何正确编写选择器？

Answer 1

你可以使用这样的东西

html

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div> <!-- only this one will be selected -->
<div id="thirdDiv">content</div>

css

div:not(.hidden)
{
    background-color: red;
}
div:not(.hidden) ~ div:not(.hidden)
{
    background-color: white; /*reset everything to normal*/
}

Answer 2

使用下一个兄弟选择器+，您可以编写一些东西，在隐藏的 div 之后，总能找到第一个未隐藏的 div。

div.hidden + div:not(.hidden) 
{
    background-color: #ff0;
}

http://jsfiddle.net/mbFFQ/