Css 如何确定子菜单活动级别的目标？

您将看到“MERCEDES”选项卡处于当前状态，这是正确的，但我需要让子菜单具有不同的当前状态，因为它看起来很糟糕。。尝试了每一个选择器，但似乎遗漏了一些东西。。谢谢

已尝试

。当前菜单项>a

，但无法获取子元素的选择器

---

您可以使用

ul.子菜单及其子选择器来定位子菜单

ul.子菜单
ul.子菜单li
ul.子菜单li：第一个孩子a
ul.子菜单li a
ul.子菜单li：最后一个子菜单a

诸如此类。
Firefox内置的CSS检查器工具可以帮助您找到定制
悬停
活动状态外观所需的选择器

以下是用于悬停导航链接的CSS活动状态选择器：

#megaMenu ul.megaMenu>li:hover>a span.wpmga链接标题，#megaMenu ul.megaMenu>li:hover>span.um-anchoremulator span.wpmga链接标题，#megaMenu ul.megaMenu>li>span.um-anchoremulator:hover span.wpmga链接标题，#megaMenu ul.megaMenu>li.megaHover>a span.wpmga链接标题，#megaMenu ul.megaMenu>li.megaHover>span.um-AnchoreSimulator span.wpmga-link-title

由于它非常长而且复杂，我将用PC上最新版本的Firefox一步一步地解释我是如何找到这个选择器的：

1。）右键单击
MERCEDES KITS
nav链接，然后从关联菜单中选择检查元件（Q）。

2。）您将处于
span
标签上。悬停会将文本颜色更改为CSS样式定义的红色。

3。）单击
span
CSS选择器上的下拉箭头，并强制其始终处于
：悬停状态。

4。）按下位于右下角的样式按钮，使其处于活动状态。激活时，该按钮将变为蓝色。

5。）在CSS规则面板的顶部，您将看到负责使文本
变为红色的选择器。

6。）在同一部分中，您可以访问这些选择器的CSS样式表和行号：

7。）第169行为所有导航锚提供了
悬停
活动状态外观：

/*顶级项目标题-悬停*/
#megaMenu ul.megaMenu>li:hover>a span.wpmga-link-title，
#megaMenu ul.megaMenu>li:hover>span.um-anchoremulator span.wpmga-link-title，
#megaMenu ul.megaMenu>li>a:悬停span.wpmga-link-title，
#megaMenu ul.megaMenu>li>span.um主播模拟器：悬停span.wpmga-link-title，
#megaMenu ul.megaMenu>li.megaHover>a span.wpmga-link-title，
#megaMenu ul.megaMenu>li.megaHover>span.um-AnchoreSimulator span.wpmga-link-title{
文本阴影：0-1px 1px#ffffff；
颜色：红色！重要；
}

8。）您可以直接在FirefoxCSS规则面板中动态编辑CSS。

示例
悬停
颜色更改是使用：
颜色：黄色！重要的

9.提示：查看HTML面板，左下角第二个图标，查看其他
和
id
元素。
已尝试“.current menu item>a”，但无法获取子元素的选择器。我理解所有这些，并感谢您的帮助。然而，这并不能帮助我瞄准我的子菜单。只有顶级的。无论我做什么，我都无法为我的子菜单获得与顶级菜单不同的活动状态。（参见屏幕截图）我描述的方法向您展示了如何获取任何要用作目标的类名或id，无论是顶级菜单项还是子菜单项。话虽如此，请解释一下你想要完成或期望发生的事情。另外，还要澄清您的子菜单的哪一部分（整个子菜单或只是一辆汽车）。从地址栏中删除
/show/
，以访问JSFIDLE编辑页面。在这个JSFIDLE示例中，我在回答中使用了这个过程来了解可以使用哪些选择器来修改子菜单。要随时查看子菜单而不在其上胡闹，请使用
display:block
，如该子菜单我的答案的最后一张照片所示。你需要在再次胡闹之后再做一次。