英文:
Trying to change menu button colors to work on html
问题
I'm trying to understand why the code that I'm using can't use the styles on my menu buttons.
我在尝试理解为什么我使用的代码无法应用于我的菜单按钮样式。
I made styles for individual menu buttons, but it seems they are not being used.
我为每个菜单按钮制定了样式，但似乎它们未被使用。
All my menu buttons assume the default 'ul.menu li a' style and not the individually ones I made.
我的所有菜单按钮都采用默认的 'ul.menu li a' 样式，而不是我自己制定的个别样式。
I'm very new to this, sorry if it seems too lazy on my part.
我对此非常陌生，如果看起来太懒的话请原谅。
英文:
Im trying to understand why the code that im using, cant use the styles on my menu buttons.
I made styles for individually menu buttons, but it seems they are not beeing used.
All my menu buttons assume the default 'ul.menu li a' style and not the individually ones i made.
Im very new to this, sorry if it seems to lazy on my part.
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>
答案1
得分: 1
如果您想选择li标签中的a标签，应该像这样：
ul li a {...}
或者选择带有特殊类的a标签：
a.novo-produto {...}
".novo-produto a" 是不正确的。这样做会选择具有novo-produto类的每个元素内的所有a标签；这在您的HTML中是不可用的，而且您不希望这样做。
我认为这是您需要的：
a.novo-produto {...}
a.pesquisar-produto {...}
...
英文:
If you want to select a tags in li tags, It should be like this:
ul li a {...}
or an a tag with special class:
a.novo-produto {...}
".novo-produto a" is incorrect. By this, you are selecting all a tags inside every element which has novo-produto class; which is not available in your html and you do not want it.
I think thats what you need:
a.novo-produto {...}
a.pesquisar-produto {...}
...
答案2
得分: 0
尝试这个，它将完美运行：
ul.menu li a.novo-produto{
/* 自定义新产品按钮 */
背景颜色: #ffcc00;
颜色: #fff;
}
之所以没有起作用是因为当你写了 ".pesquisar-produto a" 时，它选择了一个在 ".pesquisar-produto" 类内部的标签。相反，你应该写 "a.pesquisar-produto"，这样选择了一个包含 ".pesquisar-produto" 这个类的标签。
但它仍然不会起作用，因为你必须更具体，因为你已经有了更具体的CSS规则 "ul.menu li a"。所以为了覆盖之前的规则，你必须写 "ul.menu li a.novo-produto"，这更具体。记住：这是一种特异性的问题。
英文:
Try this and it will work perfectly:
ul.menu li a.novo-produto{
/* Customizações para o botão Novo Produto */
background-color: #ffcc00;
color: #fff;
}
The reason why it didn't work because when you wrote ".pesquisar-produto a" that selects a tag which is inside of ".pesquisar-produto" class. Instead, you should write "a.pesquisar-produto" which selects a tag containing ".pesquisar-produto" this class.
Still it would not work because you have to be more specific because you already have CSS rules that are "ul.menu li a" which is more specific. So to overwrite that previous rule you have to write "ul.menu li a.novo-produto" which is more specific. Remember: it is a matter of specificity.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论