css - 关于改进此 CSS 的任何建议？

Question

我正试图找到一种更好的方法来选择它。基本上是 <div>有一个 id cat1 并且它有 <a>有一个class还有cat1 .有没有更好的方法来写这个？我基本上是在尝试选择 <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, ...

但我很想知道为什么你有类名，如“cat1”、“cat2”等。你能不能有一个类(“cat”因为缺少更好的词)所有的 anchor 标签可以分享吗？这可能是 cat1、cat2 等的补充。因此您的标记如下:

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

这样您就可以简化适用于所有这些 anchor 的属性的 CSS 选择器:

div.cat a.cat { ... }

但仍然允许使用特定的选择器，例如 a.cat1 如果您需要单独设置其中一些的样式。