html - href 链接内跨度上的不同颜色

Question

我正在尝试在 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;}

Answer 1

您正在 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;
}

Demo

我不确定您是否真的希望选择器如此具体，如果您不想将类添加到每个 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.