即使我为每个div指定了不同的颜色，两个不同的div也以相同的样式显示(Two different divs are showing up in the same style even though

即使我为每个div指定了不同的颜色，两个不同的div也以相同的样式显示(Two different divs are showing up in the same style even though I specified different colours for each)

我有两个div（链接块），我想要以不同的颜色完全相同，但每当我尝试制作一种不同的颜色时，它只会改变它旁边的div。

这是代码：

#nav1 a:link,a:visited { color: #000000; display: inline-block; background-color: blue; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav1 a:active,a:hover { color: #000000; background-color: orange; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:link,a:visited { color: #000000; display: inline-block; background-color: green; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:active,a:hover { color: #000000; background-color: pink; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; }

我把它们制成了不同的颜色，但它们都显示绿色/粉红色。

和HTML：

提前感谢您的帮助！

I have these two divs (link blocks) that I want to be exactly the same just in different colours, but whenever I try to make one of the a different colour, it'll just change the div beside it as well.

Here is the code:

#nav1 a:link,a:visited { color: #000000; display: inline-block; background-color: blue; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav1 a:active,a:hover { color: #000000; background-color: orange; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:link,a:visited { color: #000000; display: inline-block; background-color: green; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:active,a:hover { color: #000000; background-color: pink; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; }

I've made them each a different colour, but they both show up green/pink.

And the HTML:

Thank you in advance for helping!

最满意答案

您需要为您要定位的每个州声明id ，例如：

#nav1 a:link,a:visited {

应该

#nav1 a:link, #nav1 a:visited {

小提琴

新CSS

#nav1 a:link, #nav1 a:visited { color: #000000; display: inline-block; background-color: blue; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: centerz; text-decoration: none; float: left; } #nav1 a:active, #nav1 a:hover { color: #000000; background-color: orange; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:link, #nav2 a:visited { color: #000000; display: inline-block; background-color: green; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:active, #nav2 a:hover { color: #000000; background-color: pink; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; }

You need to declare the id for each a state you're targeting, ex:

#nav1 a:link,a:visited {

should be

#nav1 a:link, #nav1 a:visited {

FIDDLE

NEW CSS

#nav1 a:link, #nav1 a:visited { color: #000000; display: inline-block; background-color: blue; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: centerz; text-decoration: none; float: left; } #nav1 a:active, #nav1 a:hover { color: #000000; background-color: orange; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:link, #nav2 a:visited { color: #000000; display: inline-block; background-color: green; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; } #nav2 a:active, #nav2 a:hover { color: #000000; background-color: pink; display: inline-block; width: 175px; padding-top: 17px; padding-bottom: 17px; text-align: center; text-decoration: none; float: left; }

更多推荐