如何在不选择下拉菜单中的其他链接的情况下选择菜单中的第一个链接？答案

【问题标题】：How can I select the first link in my menu without selecting the other links inside the dropdown?如何在不选择下拉菜单中的其他链接的情况下选择菜单中的第一个链接？
【发布时间】：2016-12-01 20:46:39
【问题描述】：

我无法弄清楚如何解决这个 CSS 问题。

代码是由 WordPress 插件创建的，因此在命名类等方面的可能性有限。

这是代码：

<li class="page_item page-item-365 page_item_has_children current_page_item has_children”>
    <a href="http://www.xxx.dk/side1/side2/“>Side 2</a>
    <ul class="children">
        <li class="page_item page-item-556”>
            <a href="http://www.xxx.dk/“>punkt 1</a>
        </li>   
        <li class="page_item page-item-556”>
            <a href="http://www.xxx.dk/“>punkt 1</a>
        </li>
        <li class="page_item page-item-556”>
            <a href="http://www.xxx.dk/“>punkt 1</a>
        </li>
    </ul>
</li>

问题是我的所有链接在设置样式时都会变为粗体。我只希望它发生在当前页面（选定页面）上。我尝试过使用以下 CSS 代码，但没有运气：

li.current_page_item a:first-child {
    font-weight: bold;
}

【问题讨论】：

标签： css wordpress css-selectors

【解决方案1】：

我相信我找到了解决方案 - 不知道我是否理解，但它有效；)

.current_page_item > a {
    font-weight: bold;
}

【讨论】：

这是> 直接子选择器。这只会选择<a> 元素，它们是其父元素的直接子，在本例中为.current_page_item。因为其他 <a> 标记有其他 <li> 项作为父项，所以这些不会被选中。

【解决方案2】：

在您的情况下，每个 a 都是 li 的第一个孩子。您要搜索的是：

li.current_page_item a {

此外您的所有菜单条目都链接到同一个 ID。所以我猜如果选择了一个，它的每一个都会得到“当前”类。向菜单添加一些其他链接，您会看到它会起作用！

【讨论】：

Martin - 你能告诉我我找到的解决方案和你的解决方案有什么区别吗？就这样我希望能学到一些东西:)
这也会影响嵌套<ul>内的所有<a>

【解决方案3】：

您已接近解决方案 ;-) 看看这里，这是你要找的吗？

li.current_page_item > a:first-child {
   font-weight: bold;
}

Codepen 示例： http://codepen.io/funkysoul/pen/XNVdbE

【讨论】：

好的 - 它与.current_page_item > a { font-weight: bold; } 一起工作我猜它有点相同？ @funkysoulzh
是的，除了这个更具体。 smashingmagazine.com/2007/07/…
基本一样是的！

【解决方案4】：

请重新检查您的代码。参考截图。

【讨论】：

代码是由 wordpress 插件创建的，所以我对此无能为力 - 至少不是以我的编码知识。