css选择器java服务器面标记

我正在用jsf标签（commandLinks）实现一个下拉列表

我对jsf中的css选择器有疑问

当我将鼠标悬停在commandLink类“about”上时，我想将其他两个commandLink的字体颜色更改为红色

以下是我的尝试：

在css文件中

.about:hover .sub{
    color: red;
}


<h:commandLink styleClass="about" value="About us ▾" action="/about"/>
<h:commandLink styleClass="sub" value="test1"    action="/customers"/>
<h:commandLink styleClass="sub" value="test2" action="/license" />

---

它也不起作用。

您的菜单中缺少了一些内容，您需要理解家长/孩子的概念。

css

选择器

.about.sub

将选择具有父对象

about

的子对象

sub

。在您的情况下，您根本没有层次结构

几乎所有菜单都使用这个简单的概念：

<ul>
    <li class="about">
        <h:commandLink value="About us ▾" action="/about"/>
        <ul class="sub">
            <li><h:commandLink value="test1" action="/customers"/></li>
            <li><h:commandLink value="test2" action="/license" /></li>
        </ul>
    </li>
    <!-- ... other top level menus ... -->
</ul>

---

你能做一个JSFIDLE或Codepen吗？它的java服务器面对标签和CSS。我无法在JSFIDLE上编译。我认为这与javascript无关。你的链接没有子链接。。。你在做菜单吗？您可能需要

ul

/

li

…谢谢您的回答Alexandre。我更改了你建议的所有内容，但出于某种原因，它仍然不起作用。@user3079777我刚刚删除了

h:commandLink

的

styleClass

，因为它们没有被使用，所以它应该能起作用。。。

<ul>
    <li class="about">
        <h:commandLink value="About us ▾" action="/about"/>
        <ul class="sub">
            <li><h:commandLink value="test1" action="/customers"/></li>
            <li><h:commandLink value="test2" action="/license" /></li>
        </ul>
    </li>
    <!-- ... other top level menus ... -->
</ul>

.about:hover > .sub {
    color: red;
}