CSS选择不具有类

我有一对夫妇的<div> S中的第一个元素，其中一些有class: hidden，像这样：CSS选择不具有类

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

我知道要选择具有第一<div>不是class: hidden。我到目前为止在CSS：div:not(.hidden):first-child，但它不工作。

如何正确写入选择器？

来源

2013-10-01 luca

您当前的选择器将捕获没有'.hidden'类的元素，**和**是某些元素的第一个子元素。 – avrahamcool

，你可以使用类似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*/ 
}

来源

2013-10-01 12:38:16 avrahamcool

+1尼斯答案，虽然它还没有完全交叉兼容，我会相信吗？ – MackieeE

为什么不呢？这是一个[有效的选择器]（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors）。 – avrahamcool

https://developer.mozilla.org/en-US/docs/Web/CSS/:not For MackieeE

使用下一个兄弟选择器+你可以写一些东西，总是找到隐藏的div后隐藏的第一个div。

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

http://jsfiddle.net/mbFFQ/

来源

2013-10-01 12:37:43

如果不隐藏是父项中的第一项？ – avrahamcool

好点，你的迎合 –

CSS选择不具有类

回答

相关问题