5

我有这个代码。

    <div class="myDiv">
      <div>
        I want to be red.
      </div>
    </div>

    <p>I'm some other content on the page</p>

    <div class="myDiv">
      <div>
        I want to be blue.
      </div>
    </div>

   .myDiv div:nth-child(odd) {
      color: red;
   }

   .myDiv div:nth-child(even) {
      color: blue;
   }

我明白为什么它不起作用了。它使myDiv 中的每个奇怪的 div都变成红色。我想要它做的是让 myDiv 中每个奇怪的 div 示例变为红色。我该怎么写？

这是一个JSFiddle。

4

4 回答 4

8

这里有几个问题。:nth-child是在错误的元素上。内部 div 始终是第一个孩子，因此:nth-child(odd)选择器适用于两者。而是移动到

.myDiv:nth-child(odd) div

...但是这也不起作用，因为<p>. 您的样品的有效解决方案是

.myDiv:nth-of-type(odd) div

http://jsfiddle.net/tvKRL/1/

请注意，nth-of-type唯一有效，因为.myDiv元素都是 div（它基于元素，而不是选择器），所以选择器忽略<p>. 如果 s 之间可以有另一个 div，.myDiv我认为任何 CSS 都不会适用于您想要做的事情。

于 2013-08-29T18:23:26.340 回答
6

由于 Domenic 给出的原因，您一般不能这样做。简单地说：没有选择器可以让您过滤现有的匹配元素子集。

如果您p和div.myDiv兄弟姐妹中唯一的div元素是具有该类的元素，那么您可以使用:nth-of-type()它只查看那些中间divs：

div.myDiv:nth-of-type(odd) div {
    color: red;
}

div.myDiv:nth-of-type(even) div {
    color: blue;
}

或者，如果还有其他div没有该类的 s 应该被排除在外，那么除非它们的布局有某种模式，否则你就不走运了。

于 2013-08-29T18:23:21.920 回答
5

这是不可能的。没有 CSS 选择器可以满足您的需求，您可以通过阅读完整的选择器列表看到。

一般来说，CSS 选择器不会“伸出”以包含选定对象的 DOM 树之上的元素。您需要比这更复杂的东西，将父元素的特征与目标元素的序数属性相结合，即使这些目标元素分布在 DOM 树中完全不同的位置。

于 2013-08-29T18:20:51.753 回答
-1

只适用nth-child于后代选择器的第一个成员，而不是最后一个。

div:nth-of-type(odd) > div {
  color: red;
}
div:nth-of-type(even) > div {
  color: blue;
}
<div class="myDiv">
  <div>
    I want to be red.
  </div>
</div>

<p>I'm some other content on the page</p>

<div class="myDiv">
  <div>
    I want to be blue.
  </div>
</div>

于 2016-05-08T23:04:21.093 回答