简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
尝试更改菜单按钮颜色以在 html 上工作
P粉116654495
P粉116654495 2023-09-13 21:13:41
0
2
572

我试图理解为什么我使用的代码无法使用菜单按钮上的样式。 我为单独的菜单按钮制作了样式，但似乎它们没有被使用。 我的所有菜单按钮均采用默认的“ul.menu li a”样式，而不是我单独制作的样式。 我对此很陌生，很抱歉，如果我看起来很懒。

ul.menu {
      list-style-type: none;
      margin: 200;
      padding: 100;
    }

    ul.menu li {
      display: inline-block;
      margin-right: 10px;
    }

    ul.menu li a {
      text-decoration: none;
      padding: 10px 20px;
      background-color: #f2f2f2;
      color: #333;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: Roboto;
    }

    ul.menu li a:hover {
      background-color: #ddd;
    }

    /* Estilos CSS para botões individuais */
    .novo-produto a {
      /* Customizações para o botão Novo Produto */
      background-color: #ffcc00;
      color: #fff;
    }

    .pesquisar-produto a {
      /* Customizações para o botão Pesquisar Produto */
      background-color: #0099cc;
      color: #fff;
    }

    .novo-movimento a {
      /* Customizações para o botão Novo Movimento */
      background-color: #00cc66;
      color: #fff;
    }

    .pesquisar-movimento a {
      /* Customizações para o botão Pesquisar Movimento */
      background-color: #cc6600;
      color: #fff;
    }


  </style>
</head>
<body>
  
  <nav>
    <ul class="menu">
      <li><a class="novo-produto" href="#novo-produto">Novo Produto</a></li>
      <li><a class="pesquisar-produto" href="#pesquisar-produto">Pesquisar Produto</a></li>
      <li><a class="novo-movimento" href="#novo-movimento">Novo Movimento</a></li>
      <li><a class="pesquisar-movimento" href="#pesquisar-movimento">Pesquisar Movimento</a></li>
    </ul>
  </nav>

P粉116654495
P粉116654495

全部回复(2)
P粉345302753
P粉3453027532023-09-14 20:25:59 2 楼

如果你想在li标签中选择一个标签，应该是这样的：

ul li a {...}

或具有特殊类的 a 标签：

a.novo-produto {...}

“.novo-produto a”不正确。这样，您就可以选择每个具有 novo-produto 类的元素内的所有 a 标签；这在您的 html 中不可用，并且您不想要它。 我认为这就是您所需要的：

a.novo-produto {...}
a.pesquisar-produto {...}
...
点赞 +0
添加回复
P粉343408929
P粉3434089292023-09-14 18:57:39 1 楼

试试这个，它会完美地工作：

ul.menu li a.novo-produto{
    /* Customizações para o botão Novo Produto */
    background-color: #ffcc00;
    color: #fff;
}

它不起作用的原因是，当您编写“.pesquisar-produto a”时，它选择了“.pesquisar-produto”类内部的标签。相反，您应该编写“a.pesquisar-produto”，它选择包含“.pesquisar-produto”此类的标签。

它仍然不起作用，因为你必须更具体，因为你已经有了更具体的“ul.menu li a”CSS规则。因此，要覆盖之前的规则，您必须编写更具体的“ul.menu li a.novo-produto”。请记住：这是一个具体问题。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！