0

我有这样的 HTML 代码

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }">
    <div class="subMenuActions">
        <i class="icon-caret-right" />
        <i class="icon-caret-down" />
    </div>
    ...
    <ul class="subMenu"></ul>
</li>

我想为将检查是否为空的元素制作i选择div.subMenuActions器ul.subMenu。

我知道我可以ul.subMenu使用 CSS 选择器检查是否为空，但如果为空，ul.subMenu:empty我需要隐藏。i.icon-caret-downi.icon-caret-rightul.subMenu

请不要 JS 答案。

4

2 回答 2

3

没有办法在 1-3 级使用 CSS选择前一个元素兄弟或父元素。正如 Mishik 所说，您只能选择下一个兄弟姐妹。

在您的情况下，如果您在 HTML 中重新排序元素并且您知道元素的高度，则ul.submenu可以使用此解决方案： 

<li data-bind="attr: { class: MenuItem.CssClass, 'data-Id': MenuItem.Id }">
    <ul class="subMenu"></ul>
    <div class="subMenuActions">
        <i class="icon-caret-right"/>
        <i class="icon-caret-down"/>
    </div>
    ...
</li>

然后应用这个CSS：

li {
    position:relative;
    padding-bottom:2em;
}
ul.subMenu {
    height:2em;
    position:absolute;
    width:100%;
    bottom:0;
}
div.subMenuActions {
    position:relative;
}
ul, div { /* normalize to zero */
    margin:0;
    padding:0;
}
/* and the selectors */
ul.subMenu:empty + .subMenuActions > i,
ul.subMenu:empty + .subMenuActions + .subMenuActions > i {
    display: none;
}

http://jsfiddle.net/7VmR9/15/

总而言之，更简单的方法是使用 javascript。

于 2013-07-13T13:17:18.860 回答
1

不幸的是（至少现在），CSS 中没有“前一个兄弟”选择器。

我只能建议更改然后使用它的.subMenu顺序.subMenuActions：

.subMenu:empty + .subMenuActions > i{
    display: none;
}

毕竟，您始终可以设置样式.subMenuActions以将其显示在所需的位置。

于 2013-07-13T10:09:46.487 回答