无法在 Chrome DevTools 中将菜单的字体更改为加粗答案

【问题标题】：Cannot change the font of the menu to bolder in Chrome DevTools无法在 Chrome DevTools 中将菜单的字体更改为加粗
【发布时间】：2021-10-04 17:58:36
【问题描述】：

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

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

但还有一个问题是，看起来粗体和粗体是一样的，见下文：

【问题讨论】：

【解决方案1】：

font-weight 应用于子 a 元素在这里优先。您应该定位li 内的a 元素，而不是li。

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

使用以下代码

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

字体粗细应该去锚标签。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：