不同的顏色在跨度裏面href鏈接

Question

我想添加不同的顏色在跨度裏面的href鏈接。但由於某些原因，他們沒有反映。請告訴我我在這裏做了什麼錯誤？

這裏是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()僞不支持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作爲標識符，然後你在錨標記

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

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

Answer 4

'畫' SE中的第n個孩子選擇是不是一類。如果您希望定位錨標記的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;}