Question

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

应该选择3 gmail-message-container并且颜色交替。我缺少什么？

HTML 的：

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);
}

Answer 1

一个ID只能在页面中使用一次。尝试给这些DIV一个公共类和单独的ID来选择它们。

增加：

在子项（.gmail-message-container）上使用偶数和奇数伪选择器，而不是在容器上（并使其成为类，而不是ID）：

https://jsfiddle.net/yfjfwp5p/

Answer 2

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

<body style="width:400px;">
  <div>
    <div id="gmail-message-wrapper">
      <div class="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 class="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 class="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>

Click the definition of nth-child in w3school

Answer 3

它起作用是因为nth-child选择了它所应用的元素的兄弟;在这种情况下，它应用于包装器但应该应用于容器，因此被选中的子项是消息容器。

这是你的意思吗？

Answer 4

请尝试以下

<强> CSS： -

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

使用奇数和偶数CSS选择器

4 个答案: