Question

我有这样的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是否为空。

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

请不要JS答案。

Answer 1

在级别1-3上无法使用CSS选择previous element sibling或parent element。正如米希克所说，你只能选择下一个兄弟姐妹。

在您的情况下，如果您重新排序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。

Answer 2

不幸的是，CSS中没有“以前的兄弟”选择器（至少目前为止）。

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

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

毕竟，您可以随时设置.subMenuActions样式以在所需位置显示它。

与空元素的父元素匹配的CSS选择器

2 个答案: