css - 如何定位子菜单事件级别？

Question

http://misha.pixelworklab.com/mercedes-sl/

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

已尝试 .current-menu-item > a 但无法获取子元素的选择器。

Answer 1

Firefox 内置的 CSS 检查器工具 可以帮助您找到自定义悬停 事件状态外观所需的选择器。

这是用于悬停导航链接的 CSS 事件状态选择器:

#megaMenu ul.megaMenu>li:hover>a span.wpmega-link-title,#megaMenu ul.megaMenu>li:hover>span.um-anchoremulator span.wpmega-link-title,#megaMenu ul.megaMenu>li>a:hover span.wpmega-link-title,#megaMenu ul.megaMenu>li>span.um-anchoremulator:hover span.wpmega-link-title,#megaMenu ul.megaMenu>li.megaHover>a span.wpmega-link-title,#megaMenu ul.megaMenu>li.megaHover>span.um-anchoremulator span.wpmega-link-title

因为它是疯狂的 LoNg 和 super 复杂的，我将解释我是如何在 PC 上使用最新版本的 Firefox 的逐步得到这个选择器的:

1.) 右键单击​​ MERCEDES KITS 导航链接并从上下文菜单中选择 Inspect Element(Q)。

2.) 您将位于 span 标记上。悬停会将文本颜色更改为 red，如 CSS 样式所定义。

3.) 单击 span CSS 选择器上的下拉箭头并强制其始终位于 :hover 状态。

4.) 按下位于右下角的样式按钮，使其处于事件状态。激活时，该按钮变为蓝色。

5.) 在 CSS 规则面板的顶部，您会看到负责将文本设为红色的选择器.

6.) 在同一部分，您可以访问这些选择器的 CSS 样式表 和行号:

7.) 第 169 行为所有导航 anchor 提供了hover 事件状态外观:

/* Top Level Items Title - Hover */
#megaMenu ul.megaMenu > li:hover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li:hover > span.um-anchoremulator span.wpmega-link-title,
#megaMenu ul.megaMenu > li > a:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li > span.um-anchoremulator:hover span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > a span.wpmega-link-title,
#megaMenu ul.megaMenu > li.megaHover > span.um-anchoremulator span.wpmega-link-title {
  text-shadow: 0 -1px 1px #ffffff;
  color: red !important;
}

8.)您可以直接在 Firefox CSS 规则面板中动态编辑 CSS。
示例 hover 颜色更改是使用:color: yellow !important; 上面的Step 5:

9.) 提示:查看 HTML 面板，左下角第二个图标，查看其他 classname 和 id 元素。