0

我有一些类似的东西

<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

我正在尝试访问第二个分隔线。我也需要访问按钮。我尝试阅读第 n 个孩子的东西，发现它与 IE 不兼容。

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

我现在正在使用 xPaths

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

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

4

2 回答 2

2

相邻兄弟选择器 +能够做到这一点并且与 IE7+兼容

Fiddle 用 4 个按钮演示了它的使用：http: //jsfiddle.net/AgNwu/
（如果您已经在任何地方都依赖 id/class，则不需要“div”。如果您将某些东西称为“按钮”，则希望它是一个链接，一个 input[type="submit|image|button|reset"] 或按钮元素 ;) )

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

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

于 2012-04-19T05:25:51.587 回答
1

你可以这样写：

div.menu div.button + div.button div.divider{
 color:red;
}
于 2012-04-19T05:16:21.590 回答