多類樣式化鏈接

爲了進一步修整我的CSS下來，我需要知道如何風格在多個類別中的鏈接在同一行的每一個環節，訪問，懸停和活躍的（除非有一個更好的辦法）多類樣式化鏈接

<div class="div1"><a href="">Some words</a></div> 
<div class="div2"><a href="">Some words</a></div> 
<div class="div3"><a href="">Some words</a></div>

以下是我認爲將工作的CSS只是第一列是」 .div1' ，而.div2和.div3被忽略

.div1 a:link, div2 a:link, div3 a:link { 
    color: red; 
} 
.div1 a:visited, div2 a:visited, div3 a:visited { 
    color: red; 
} 
.div1 a:hover, div2 a:hover, div3 a:hover { 
    color: blue; 
} 
.div1 a:active, div2 a:active, div3 a:active { 
    color: blue; 
}

來源

2014-04-17 Hastig Zusammenstellen

這裏是一個小提琴鏈接，幫助http://jsfiddle.net/Hastig/LUevH/ –

我的不好，我一次對我的樣式表做三件不同的事情，並將問題與另一個問題混合在一起，然後解決問題。我現在需要休息一下以清理我的頭部：D謝謝所有回答 –

您div2和div3之前忘了點。

入住這JSFiddle

來源

2014-04-17 22:14:51 Linek

謝謝Linek，我不應該錯過這個。我缺乏咖啡因：D –

我的建議整理您的標記好一點。我假定你不想全局應用這些風格，所以我建議將它們放入一個容器語義：

<aside> 
<div class="div1"><a href="">Some words</a></div> 
<div class="div2"><a href="">Some words</a></div> 
<div class="div3"><a href="">Some words</a></div> 
</aside>

現在還能用自己的風格是這樣的：

aside a:link, aside a:visited { 
    color: red; 
} 

aside a:hover, aside a:active { 
    color: blue; 
}

來源

2014-04-17 22:16:02

感謝您的回覆，我會研究一下那些東西 –

原因爲什麼它不起作用是因爲你的css中其他div的開頭沒有點。

爲了簡化問題，如果你想在多個元素相同的樣式，創建一個類，常見的是每個：

<div class="div1 new"><a href="">Some words</a></div> 
<div class="div2 new"><a href="">Some words</a></div> 
<div class="div3 new"><a href="">Some words</a></div> 


.new a:link, .new a:visited { 
    color: red; 
} 
.new a:hover, .new a:active { 
    color: blue; 
}

如果您不需要單獨大概引用的div，那麼你就不要不需要div1，div2，div3類。如果你確實需要，那麼他們可能會更好。

來源

2014-04-17 22:17:02 happyjack

謝謝傑克的答覆，這確實是我失蹤的點 –

多類樣式化鏈接

回答

相關問題