2

可能重复：
活动孩子的父母的复杂 CSS 选择器

我正在制作一个 CSS 上下文菜单，我希望所有具有子菜单的列表项的样式都不同，以便向用户直观地表示它们具有子菜单。

上下文菜单是一个 UL 元素，它的列表项是 LI，子菜单是 UL。我已经有了功能，我只需要能够以不同的方式设置子菜单项的样式，以便它们明显不同。

代码和伪代码：

我有什么（工作CSS）：

.bhContextMenu,
.bhContextMenu LI UL{
background:white;
background:rgba(255,255,255,0.95);
border:0.5mm solid lightgray;
border-color:rgba(0,0,0,0.25);
border-radius:1mm;
box-shadow:0 1mm 2mm lightgray;
box-shadow:0 1mm 2mm rgba(0,0,0,0.25);
cursor:default;
display:none;
list-style:none;
margin:0;
padding:0;
position:absolute;
width:1.5in;
}
.bhContextMenu LI{
padding:1mm 4mm;
}
.bhContextMenu LI:hover{
 background: lightgray;
 background: rgba(0,0,0,0.1);
}
.bhContextMenu LI UL{
display:none;
list-style:none;
position:absolute;
left:1.5in;
margin-top:-1.5em;
}
.bhContextMenu LI:hover UL,
.bhContextMenu LI UL:hover{
display:block;
}
.bhContextMenu HR{
border: none;
border-bottom: 0.5mm solid lightgray;
}

我还想要什么（伪代码）：

.bhContextMenu LI contining UL{
font-weight:bold;/* or something */
}
4

2 回答 2

3

除非您只区分空元素和非空元素（您不是...），否则您不能根据元素的内容来选择元素。

你能做的是

  1. 更改您的标记为包含子菜单的菜单项添加一个类，并为其设置样式。

  2. 在“不可见/折叠”模式下更改子菜单的样式，以便它们实际上可见，但仅作为一个小箭头或您想使用的其他任何东西来指示那里有一个子菜单。在这里演示：http: //jsbin.com/ojociq/1/edit

于 2012-10-05T19:15:50.387 回答
2

如前所述，您所要求的无法使用 CSS 选择器解决（请参阅规范）。

当然，您可以将类添加到列表项中，但解决您需要的最简单的方法是一行简单的 jQuery 脚本：

$('li').has('ul').addClass('has-ul');​

演示

于 2012-10-05T19:25:04.337 回答