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

我有这样的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>

...

我想在

div.submenuations

中为元素

I

设置选择器，该选择器将检查

ul.subMenu

是否为空

我知道我可以使用CSS选择器

ul.子菜单：empty

检查

ul.子菜单是否为空，但如果
ul.子菜单
为空，我需要隐藏
I.icon-caret-down
，
I.icon-caret-right

请不要使用JS答案。
不幸的是，CSS中没有“以前的兄弟姐妹”选择器（至少现在是这样）

我只能建议更改
子菜单
和
子菜单
的顺序，然后使用以下命令：

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

毕竟，您始终可以设置
。子菜单的样式以在所需位置显示它。
不幸的是，CSS中没有“以前的同级”选择器（至少现在是这样）

我只能建议更改
子菜单
和
子菜单
的顺序，然后使用以下命令：

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

毕竟，您始终可以设置
。子菜单的样式以将其显示在所需的位置。
在级别1-3上无法选择或使用CSS。正如Mishik所说，您只能选择下一个兄弟姐妹

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



...


然后应用以下css：

li{
位置：相对位置；
垫底：2米；
}
ul子菜单{
高度：2米；
位置：绝对位置；
宽度：100%；
底部：0；
}
分部分项{
位置：相对位置；
}
ul，div{/*规格化为零*/
保证金：0；
填充：0；
}
/*选择者呢*/
ul.子菜单：空+。子菜单>i，
ul.子菜单：空+。子菜单+。子菜单>i{
显示：无；
}


总而言之，更简单的方法是使用javascript。
在1-3级上没有选择或使用CSS的方法。正如Mishik所说，您只能选择下一个兄弟姐妹

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



...


然后应用以下css：

li{
位置：相对位置；
垫底：2米；
}
ul子菜单{
高度：2米；
位置：绝对位置；
宽度：100%；
底部：0；
}
分部分项{
位置：相对位置；
}
ul，div{/*规格化为零*/
保证金：0；
填充：0；
}
/*选择者呢*/
ul.子菜单：空+。子菜单>i，
ul.子菜单：空+。子菜单+。子菜单>i{
显示：无；
}


总而言之，更简单的方法是使用javascript。
您的陈述相互矛盾。CSS中确实没有“以前的同级选择器”-这实际上排除了
~
能够找到所有同级。所以你的代码不起作用。@BoltClock当我意识到
~
不起作用时，我马上就把帖子藏了起来。你的陈述自相矛盾。CSS中确实没有“以前的同级选择器”-这实际上排除了
~
能够找到所有同级。所以你的代码不会工作。@BoltClock当我意识到
~
不会以这种方式工作时，我已经立即隐藏了帖子。这不是HTML代码，因为
元素在HTML中不能以任何方式自动关闭。如果使用适当的
内容类型
，则可能是XML/XHTML代码，但如果使用
文本/html
，则html解析器会将此代码解释为嵌套的未关闭标记。这不是html代码，因为
元素在html中不能以任何方式自关闭。如果与适当的
内容类型
一起使用，则可能是XML/XHTML代码，但如果作为
文本/html
使用，则html解析器会将此代码解释为嵌套的未关闭标记。