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实现这一目标？

非常感谢。

谢谢， Medha

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中也是如此，但这很快就会发生。

更多信息：

CSS selector for "foo that contains bar"?

<强>原始

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

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

在这里你可以找到答案：

Complex CSS selector for parent of active child

从链接中复制简短回答：

选择器无法提升

CSS无法选择元素的父元素或祖先元素   满足一定的标准。更高级的选择器方案（例如   XPath）将启用更复杂的样式表。但是，专业   CSS工作组拒绝提交父母提案的原因   选择器与浏览器性能和增量呈现相关   的问题。

css - 为兄弟姐妹子元素定义样式

3 个答案:

HTML

CSS