css 选择器 java server faces 标签

Question

我正在使用 jsf 标签(commandLinks)实现一个下拉列表。

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

当我将鼠标悬停在“关于”的 commandLink 类上时，我想将其他 2 个 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" />

但没有任何变化。这个我也试过

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

也没用。

Answer 1

您的菜单中遗漏了一些东西，您需要了解父/子概念。 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>

现在你的 css 选择器可以工作了:

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