2

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

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

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

在此处输入图像描述

4

2 回答 2

1

Firefox 内置的CSS Inspector Tools可以帮助您找到自定义hover活动状态外观所需的选择器。

这是用于悬停导航链接的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 和 ubber 复杂，我将解释我是如何一步一步地使用最新版本的 PC 上的 Firefox 获得这个选择器的：

1.)右键单击MERCEDES KITS​​导航链接并从上下文菜单中 选择Inspect Element(Q) 。在此处输入图像描述

2.)你会在span标签上。悬停会将文本颜色更改red为 CSS 样式所定义的颜色。 在此处输入图像描述

3.)单击 CSS 选择器上的下拉箭头span并强制它始终处于:hover状态。 在此处输入图像描述

4.)按下位于右下角的样式按钮，使其处于活动状态。激活时，该按钮变为蓝色。 在此处输入图像描述

5.)在CSS 规则面板的顶部，您会看到负责制作文本的选择器red。 在此处输入图像描述

6.)在同一部分中，您可以访问这些选择器的CSS 样式表和行号： 在此处输入图像描述

7.)第 169 行为所有导航锚提供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。 示例颜色更改是使用：对于上面的第 5 步：
hovercolor: yellow !important;
在此处输入图像描述

9.)提示：查看HTML 面板，左下角第二个图标，查看其他 classname和id元素。 在此处输入图像描述

于 2013-01-10T23:42:33.483 回答
0

您可以使用子菜单ul.sub-menu及其子选择器来定位子菜单。

ul.sub-menu ul.sub-menu li ul.sub-menu li:first-child a ul.sub-menu li a ul.sub-menu li:last-child a

像这样的东西。

于 2013-01-10T01:02:24.907 回答