Question

我正在尝试在href链接内的span上添加不同的颜色。但由于某些原因，他们没有反思。请告诉我我在这里做的错误是什么？

以下是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

您在class属性中声明了href个名称。你的标记应该是

<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

我不确定你是否真的希望选择器是特定的，如果你不想将类添加到每个锚标签，你可以使用: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

我只是说你可以使用它但并不意味着你应该使用它，只需最好地满足你的要求。

注意：不支持:nth-of-type()伪＆lt; IE9所以，如果你是希望支持复古版本，而不是为每个版本声明类是一个更好的选择。

Answer 2

您的CSS选择器引用href值，就好像它被设置为class

一样

将您的HTML更改为：

<div class="map_view_buttons"> <a class="draw"><span></span>Draw From Scratch</a>
 <a class="add"><span></span>Add Area</a>
 <a class="edit"><span></span>Edit Area</a>
</div>

或者，将您的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[href=draw] span {
    background:red;
}
.map_view_buttons a[href=draw] span {
    background:orange;
}
.map_view_buttons a[href=draw] span {
    background:green;
}

Answer 3

我建议您不要在链接中使用span而是使用父div作为标识符然后在锚标记上使用第n个子选择器

map_view_buttons a:nth-child(3) {  
  background:green;
}

http://css-tricks.com/how-nth-child-works/

Answer 4

'draw'不是一个类。如果要定位锚标记的href属性，请执行以下操作：

.map_view_buttons a[href="draw"] span{background:red;}

这是jsfiddle

http://jsfiddle.net/ye3yp/3/

Answer 5

你可以参考这个小提琴Fiddle 您可以使用CSS属性选择器选择具有href属性的链接

.map_view_buttons a[href="draw"]{background:red;}
.map_view_buttons a[href="add"]{background:orange;}
.map_view_buttons a[href="edit"]{background:green;}

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

5 个答案: