结合css选择器来显示/隐藏兄弟姐妹

Question

我正在使用jqUI构建一个包含内容窗格和侧边菜单的应用程序。

当页面显示列表时，我想隐藏一些菜单内容，但当页面显示一个项目时，我想显示菜单内容。

我创建了一个非常基本的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

如果我正确理解您的问题，您希望找到基于父级（div#content）的兄弟姐妹，但只能从特定父母开始，具体取决于他们的孩子（div#list_item.active）。

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