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

你可以使用像这样

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*/
}