Question

我有这段代码。

    <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。

Answer 1

这里有几个问题。 :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>。如果在.myDiv之间可以存在另一个div，我认为任何CSS都不适用于您想要做的事情。

Answer 2

这是不可能的。没有CSS选择器可以执行您想要的操作，您可以通过仔细阅读complete list of selectors来看到。

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

Answer 3

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

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

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

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

或者如果还有其他div没有应该被排除的那个类，那么除非它们有某种模式，否则你就会失去运气。

Answer 4

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

＆＃13;

div:nth-of-type(odd) > div {
  color: red;
}
div:nth-of-type(even) > div {
  color: blue;
}

＆＃13;

<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>

＆＃13;

你如何让nth-child与后代选择器一起工作？

4 个答案: