gpt4 book ai didi

css - 使用奇偶 CSS 选择器

转载 作者:太空宇宙 更新时间:2023-11-03 19:56:52 25 4
gpt4 key购买 nike

我正在尝试使用 CSS 的奇数和偶数选择器,但我无法理解我的代码中发生的事情... gmail-message-wrapper 是如何被选中的?

应选择 3 个 gmail-message-container 并使用交替颜色。我缺少什么?

https://jsfiddle.net/0d883fcz/

HTML:

<body style="width:400px;">
<div>
<div id="gmail-message-wrapper">
<div id="gmail-message-container">
<span class="trim-text">some.email@some.domain (Some Name)</span>:
<br>
<span class="trim-text"><b>Some title</b></span>
<br>
<span class="trim-text">Some summary text goes here</span>
</div>
<div id="gmail-message-container">
<span class="trim-text">some.email@some.domain (Some Name)</span>:
<br>
<span class="trim-text"><b>Some title</b></span>
<br>
<span class="trim-text">Some summary text goes here</span>
</div>
<div id="gmail-message-container">
<span class="trim-text">some.email@some.domain (Some Name)</span>:
<br>
<span class="trim-text"><b>Some title</b></span>
<br>
<span class="trim-text">Some summary text goes here</span>
</div>
</div>
</div>
</body>

CSS:

#gmail-message-wrapper:nth-child(even) {
background-color: rgba(0, 0, 0, 0.5);
}
#gmail-message-wrapper:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.1);
}

最佳答案

一个 ID 只能在一个页面中使用一次。尝试为这些 DIV 提供一个公共(public)类和单独的 ID 以选择它们。

添加:

在子级 (.gmail-message-container) 上使用偶数和奇数伪选择器,而不是在容器上(并使其成为一个类,而不是 ID):

https://jsfiddle.net/yfjfwp5p/

关于css - 使用奇偶 CSS 选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37800434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com