即使我为每个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:
<div id="nav1"><a href="">LINK1</a></div> <div id="nav2"><a href="">LINK2</a></div>提前感谢您的帮助!
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:
<div id="nav1"><a href="">LINK1</a></div> <div id="nav2"><a href="">LINK2</a></div>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; }更多推荐
发布评论