既不是第n个孩子,也没有第n-的型
我有以下标记:既不是第n个孩子,也没有第n-的型
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
我试图交替#00A6FF
和#27FF00
之间的username-area
的背景颜色。在我的CSS,我有:
.chat-area .username-area:nth-child(odd){
background-color: #00A6FF;
}
.chat-area .username-area:nth-child(even){
background-color: #27FF00;
}
但所有的username-area
的div被设置为#00A6FF
。我尝试使用:nth-of-type
,我也尝试使用表达式(2n+1
和2n+2
)而不是'奇怪'和'偶数',但我没有计算出这个结果。我看了一下这个网站上的几个问题,但是我认为解决方案没有帮助或者似乎解决了不适用于我的代码的问题。
只要给一转的ommelete :)
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
这是因为奇数和偶数元素是.chat-area
,不username-area
。
啊!傻我!是的,这是完美的,我会尽快接受你的回答。谢谢! – SoSimple
不客气:) –
只是让一个:
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
@Marcos佩雷斯古德是快:)
对不起,我upvote你,并给一些声誉:) –
谢谢:)这是非常友好和热烈欢迎我:) – orgertot
因为他们是第一个'div'(其类型)和第一个孩子每个父母下。所以显然只有'odd'选择器才会被应用。 CSS选择器不会跨父母工作。 – Harry