Question

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

WordPress正在申请一个班级＆＃34; current_page_item＆＃34;到我的侧边菜单中围绕我的锚点链接的<li>。我想只加粗当前页面项目。

我有一些子菜单嵌套如下：

<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链接变为粗体，它也会粗略显示每个子链接。

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

我需要什么CSS？如果班级在锚链接本身，这将是简单的，但我无法理解如何做到这一点。

Answer 1

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

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

WORKING DEMO

注意

标记中的所有内容都未关闭，因此请使用

<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}

这会在a下直接加注ul.menu li.current_page_item标记，无论您拥有多少直接a标记。

工作代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

.current_page_item>a{
                    font-weight:bold
                    }

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

注意：如果您想要制作.current_page_item的直接子节点的所有锚点，请使用此方法，否则如果您只想将第一个锚点设为大胆使用

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

正如rahul所解释的那样。但是如果你有多个锚点并且你需要使它们变粗，你最终会使用first-child, nth-child, last-child,etc我建议使用一个类来使元素变粗（有些像class='bold'），或者我有如上所示

样式只有一个锚链接，类应用于li

3 个答案: