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

Question

我有几个<div>个，其中一些有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

您可以使用this

之类的内容

<强> 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/