无法在 Chrome DevTools 中将菜单字体更改为更粗

Question

我想把菜单项的字体改成粗体，所以我是这样操作的：

 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="https://www.datanumen.com/products/">Products</a></li>

li.menu-item.menu-item-type-post_type.menu-item-object-page {
    font-weight: bolder;
}

我希望使所有菜单项都更粗，所以我选择了针对 menu-item-object-page 的说明符而不是 menu-item-161。

然后在这样做之后，没有任何反应。菜单项根本没有变粗。

以下是我的做法：

只是想知道我做错了什么？非常感谢。

更新

刚刚使用以下 css 规则将菜单项加粗：

#menu-main-menu-1 li a {
    font-weight: bold;
}

但还有一个问题是，粗体和粗体完成的好像一样，见下图：

Answer 1

font-weight 应用于子 a 元素在这里优先。您应该以 li 内的 a 元素为目标，而不是 li.

li.menu-item.menu-item-type-post_type.menu-item-object-page a {
    font-weight: bolder;
}

Answer 2

在你的 css 中你漏掉了“a”

li.menu-item.menu-item-type-post_type.menu-item-object-page a {
    font-weight: bolder;
}

始终选择 id 而不是类，因为 id 是唯一的，所以不会混淆，因为您的 ul 标签中有 id

给出以下内容css

#menu-main-menu-1 li a {
    font-weight: bolder;
}

Answer 3

使用下面的代码

.desktop-nav>ul>li>a {
    font-weight: 900 !important;
}
or
.desktop-nav>ul>li>a {
    font-weight: bolder !important;
}

字体粗细应转到锚标记。

Answer 4

同意答案，您需要定位 'a' 元素。

检查它是否不是从另一个 css 声明应用的继承。

testing wwww.datanumen.com in chrome browser with developer tools

Answer 5

@alanac 您使用的字体系列必须支持 css 属性。我尝试使用 font-weight: 1000;这就是可以为该字体设置的所有更大胆的外观。

testing wwww.datanumen.com in chrome browser with developer tools

Cannot change the font of the menu to bolder in Chrome DevTools