只有一个锚点 link 样式 class 应用于 li

Question

在这方面苦苦挣扎，但我相信这很容易！

WordPress 正在将 class "current_page_item" 应用到 <li>，它在我的侧边菜单中包围着我的锚点 link。我只想加粗当前页面项目。

我有一些子菜单是这样嵌套的：

<ul class="menu">
    <li class="current_page_item">
        <a>Please bold</a>
        <ul class="sub-menu">
            <li><a>Pleas DO NOT bold</a></li>
            <li><a>Pleas DO NOT bold</a></li>
            <li><a>Pleas DO NOT bold</a></li>
        </ul>
    </li>
</ul>

我就是无法将 1 link 加粗，它也将每个子 link 加粗。

ul.menu li.current_page_item:first-child {font-weight:bold}

我需要什么CSS？如果 class 位于锚点 link 本身，这将很简单，但我不知道该怎么做。

Answer 1

你应该像这样使用a:first-child

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

WORKING DEMO

注意

你在标记中的所有 li 都没有关闭，所以使用

<ul class="menu">
    <li class="current_page_item"> <a>Please bold</a></li>
        <li>
            <ul class="sub-menu">
                <li><a>Pleas DO NOT bold</a></li>
                <li><a>Pleas DO NOT bold</a></li>
                <li><a>Pleas DO NOT bold</a></li>
            </ul>
         </li>
</ul>

Answer 2

你可以这样做：

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

这会将直接位于 ul.menu li.current_page_item 下的 a 标记加粗，无论您在其下有多少直接 a 标记。

工作代码片段：

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

<ul class="menu">
    <li class="current_page_item">
        <a>Please bold</a>
        <ul class="sub-menu">
            <li><a>Pleas DO NOT bold</a>
            <li><a>Pleas DO NOT bold</a>
            <li><a>Pleas DO NOT bold</a>
        </ul>
    </li>
</ul>

Answer 3

如果您也想支持旧版浏览器，请执行此操作

.current_page_item>a{
                    font-weight:bold
                    }

这将select .current_page_item 的直接child，它是锚点并使其变为粗体。这是比 first-child 更好的方法，因为旧浏览器不支持 first-child。 Demo

注意：如果你想制作所有.current_page_item的直接children的锚点，请使用这个，否则如果你只想要第一个一要大胆使用

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

如所述。但是如果你有多个锚点并且你需要将它们设为粗体，你最终会使用 first-child, nth-child, last-child,etc 我建议使用 class 来使元素变为粗体（类似于 class='bold'），或者如上所示

只有一个锚点 link 样式 class 应用于 li

Style only one anchor link with class applied to li

css

stylesheet