關於改進這個CSS的任何建議？

Question

我試圖找到更好的方法來選擇這個。基本上<div>有一個cat1的id，它有<a>也有classcat1。有沒有更好的方式來寫這個？我基本上試圖選擇<a>，它具有與它所在的div id相似的類名稱。

div#cat1 a.cat1, 
div#cat2 a.cat2, 
div#cat3 a.cat3, 
div#cat4 a.cat4 { ... } 

Answer 1

根據CSS其餘部分的複雜性，您可能會縮短選擇器，例如， #cat1 .cat1, #cat2 .cat2, ...或只是.cat1, .cat2, ...

但我會有興趣知道爲什麼你有類名稱，如「貓1」，「貓2」等。你可以有一個類（「貓」缺乏更好的詞）所有的錨標籤可以共享？這可能是除了CAT1，CAT2等，所以您的標記會是這樣：

<div class="cat" id="cat1"><a class="cat cat1">...</a></div> 
<div class="cat" id="cat2"><a class="cat cat2">...</a></div> 

這樣你可以簡化你的CSS選擇器適用於所有這些錨的屬性：

div.cat a.cat { ... } 

但是如果您需要單獨設置其中的某些選項，仍然允許使用特定的選擇器，如a.cat1。

Answer 2

您不需要標籤名稱。

#cat1 .cat1