Question

我有一些与此相关的内容

<div class="menu" style="background-color: transparent;">
 <div class="button">
  <div class="divider" style="background-color: transparent;"></div>
  <a id="apple" class="unselect select" href="/apple">
   <span class="apple1">Apple</span>
  </a>
 </div>
 <div class="button">
  <div class="divider"></div>
  <a id="orange" class="unselect" href="/orange">
   <span class="orange1">Orange</span>
  </a>
 </div>
 ....

这给了我第一个分隔符

css=div.menu div.button div.divider

我正在尝试访问第二个分频器。我也需要访问按钮。我尝试阅读 nth child 的内容并注意到它与IE不兼容。

是否有一个CSS选择器可以在一个元素（具有给定的类/ id）下找到第二个/第三个子项或后代（给定类/ id）？

我现在正在使用xPaths

//div[@class='menu']/descendant::div[contains(@class,'divider')][2]

它有效，但我想将其迁移到CSS。

Answer 1

adjacent sibling selector +能够做到并与IE7 +兼容

通过4个按钮演示其使用方法： http://jsfiddle.net/AgNwu/
（如果你已经在任何地方依赖id / class，则不需要“div”。如果你调用某个“按钮”，则期望它是一个链接，一个输入[type =“submit | image | button | reset”]或button元素;））

<强> CSS

.menu > .button {
    border: 1px solid darkblue;
    padding: 10px;
    margin: 5px 0;
}

.menu > .button + .button .divider {
    background: Tan;
}
.menu > .button + .button .divider:after{
    content: " (2nd or more)";
}

.menu > .button + .button + .button .divider {
    background: yellow;
}
.menu > .button + .button + .button .divider:after{
    content: " (3rd or more)";
}

编辑：相邻的兄弟姐妹，我认为这是兄弟姐妹与一般兄弟姐妹如果您的+节点/元素之间有其他类型的节点，则可以将~替换为.button（一般兄弟）。这相当于:nth-of-type仍然适用于IE7 +

Answer 2

您可以这样写：

div.menu div.button + div.button div.divider{
 color:red;
}

是否有一个CSS选择器来定位一个元素（具有给定的类/ id）下的第二个/第三个子项或后代（给定的类/ id）？

2 个答案: