css - 结合 css 选择器来显示/隐藏 sibling

Question

我正在使用 jqUI 构建一个带有内容 Pane 和侧边菜单的应用程序。

当页面显示列表时，我想隐藏一些菜单内容，但是当页面显示元素时，我想显示菜单内容。

我创建了一个非常基本的 jsfiddle 作为示例 http://jsfiddle.net/pq83M/8/

我不想在 javascript 中执行此操作，因为页面转换在 jqui 库中，我认为将此特定转换与其他转换分开收听并不有效。

我希望弄清楚的是一种表达方式

当

div#content > div#list_item.active ~ div#menu > div#list_item_details {
  display:block;
}

需要注意的是，~ 正在寻找 div#content 的兄弟，而不是 div#list_item.active 的兄弟。

我使用的是 Sass，因此可以使用这些自定义选择器。

Answer 1

如果我对你的问题的理解正确，你想根据 parent (div#content) 找到 sibling ，但只能从特定的 parent 开始，这取决于他们的 child (div#list_item.active )。

如果是这样，它在 CSS Selector Level 3 中是不可能的，但它会出现在 CSS Selectors Level 4 中；您将能够选择您的操作/比较的主题。 http://dev.w3.org/csswg/selectors4/#subject