时间戳

首页 > 解决方案 > 无法在 Chrome DevTools 中将菜单的字体更改为加粗

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

问题描述

我的网站位于https://www.datanumen.com/

我想将菜单项的字体更改为更粗体，所以我执行以下操作：

  1. 在 Chrome 中打开它
  2. 点击“开发工具”
  3. 转到第一个菜单项“产品”，然后右键单击“检查”。
  4. 然后我找到菜单项
 <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>
  1. 然后在右手边，我点击“+”为其添加样式，如下：
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;
}

但还有一个问题是，看起来粗体和粗体是一样的，见下文： 在此处输入图像描述

标签： htmlcssgoogle-chromegoogle-chrome-devtools

解决方案

在你的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;
}

推荐阅读