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

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为红色.我想要它做的是让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>.如果.myDivs之间可以有另一个div我不认为任何CSS将适用于你想要做的事情.

Answer 2

这是不可能的.没有CSS选择器可以执行您想要的操作,您可以通过仔细阅读完整的选择器列表来查看.

通常,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没有应该被排除的类,那么除非有某种模式,否则它们就会被排除在外,你就不走运了.