css - css - 定义兄弟元素的样式

Question

我正在尝试根据第一个兄弟的类定义第二个兄弟的子元素的样式。

这是我想要实现的一个例子

<div >
      <div class="one">
          <div class="find edit">
              Find me
          </div>
      </div>
      <div class="two">
          <div class="change">
              Change me
          </div>
      </div>
</div>

在此示例中，如果找到“编辑”类，我希望“更改我”为绿色。是否有可能纯粹基于css来实现？

非常感谢帮助。

谢谢， 美达

Answer 1

据我所知，无法访问父选择器（我希望是这样）。如果您可以考虑这种结构，那将完全没有问题：

HTML

<div>
  <div class="one edit">
    <div class="find">
      Find me
    </div>
  </div>
  <div class="two">
    <div class="change">
      Change me
    </div>
  </div>
</div>

CSS

.one.edit + .two .change { color: green; }

---

如果没有，您可以使用一点 JavaScript 轻松完成您的目标。

Answer 2

更新：

现在我注意到edit孩子需要的课程。你不能。

只是你需要一个parent选择器之类的东西，这在 CSS 3 中不存在，但它在 CSS 4 中被建议，但这远不会很快发生。

更多在这里：

“包含 bar 的 foo”的 CSS 选择器？

.

原来的：

根据您关心的浏览器，这可能有效：

div.one + div.two > div.change {
    color: green;
}

参考：

http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

现场示例：

http://jsfiddle.net/Meligy/NVjq6/

Answer 3

在这里你可以找到答案：

活动孩子的父母的复杂 CSS 选择器

从链接复制的简短答案：

选择器无法上升

CSS 无法选择满足特定条件的元素的父级或祖先。更高级的选择器方案（例如 XPath）将支持更复杂的样式表。然而，CSS 工作组拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关。