我正在尝试在 href 链接内的 span 上添加不同的颜色。但由于某些原因,他们没有反射(reflect)。请告诉我我在这里做错了什么?
这是 Fiddle
HTML:
<div class="map_view_buttons">
<a href="draw"><span></span>Draw From Scratch</a>
<a href="add"><span></span>Add Area</a>
<a href="edit"><span></span>Edit Area</a>
CSS:
.map_view_buttons{
float:left;
}
.map_view_buttons a{
display:inline-block;
padding:3px 10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #a8a8a8;
font-weight:bold;
color:#000;
font-size:12px;
}
.map_view_buttons a span{
display:inline-block;
width:18px; height:18px;
vertical-align:middle;
margin-right:5px;
border:1px solid #ccc;
}
.map_view_buttons a.draw span{background:red;}
.map_view_buttons a.draw span{background:orange;}
.map_view_buttons a.draw span{background:green;}
最佳答案
您正在 href
属性中声明您的 class
名称。你的标记应该是
<div class="map_view_buttons">
<a href="#" class="draw"><span></span>Draw From Scratch</a>
<a href="#" class="add"><span></span>Add Area</a>
<a href="#" class="edit"><span></span>Edit Area</a>
</div>
不仅如此,您有相同的选择器但颜色不同,因此最后一个将覆盖前两个。
应该是这样
.map_view_buttons a.draw span {
background:red;
}
.map_view_buttons a.add span {
background:orange;
}
.map_view_buttons a.edit span {
background:green;
}
我不确定您是否真的希望选择器如此具体,如果您不想将类添加到每个 anchor 标记,您可以使用 :nth-of-type()
伪...
所以上面的东西可以写成
.map_view_buttons a:nth-of-type(1) span {
background: red;
}
.map_view_buttons a:nth-of-type(2) span {
background: red;
}
.map_view_buttons a:nth-of-type(3) span {
background: red;
}
Demo 2 (无需声明类)
如果你愿意,你也可以去掉 span
标签,方法是使用 :before
伪元素和 pointer-events: none;
.
.map_view_buttons {
float:left;
}
.map_view_buttons a {
display:inline-block;
padding:3px 10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #a8a8a8;
font-weight:bold;
color:#000;
font-size:12px;
}
.map_view_buttons a:before {
content: "";
display:inline-block;
width:18px;
height:18px;
vertical-align:middle;
margin-right:5px;
border:1px solid #ccc;
}
.map_view_buttons a:nth-of-type(1):before {
background: red;
}
.map_view_buttons a:nth-of-type(2):before {
background: orange;
}
.map_view_buttons a:nth-of-type(3):before {
background: green;
}
Demo 3 (没有 span
标签,没有定义 class
)
我只是说你可以使用它,但并不意味着你应该使用它,只需要最适合你的需求即可。
Note:
:nth-of-type()
pseudo is not supported < IE9 so if you are looking to support vintage versions, than declaring classes for each is a better option.
关于html - href 链接内跨度上的不同颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23605396/