html - 我怎样才能简单地使用文章标签？我正在重复使用相同的 10 行代码，唯一的区别是标签颜色

Question

我正在设计一个基本的新闻类博客。假设在我的新闻博客上我有大约 10 个类别，每个类别都有一个标签，该标签将显示在名片图像的右上角。现在每个标签都有自己特定的识别颜色。例如，视频标签为红色，生活方式标签为绿色，节目标签为橙色……等等。

我在底部的代码有效，但我的问题是它重复使用了相同的 10 行 css，唯一变化的因素是标签颜色。

有没有更有效的方法？

.article-tag-news{
    ...
    background-color: #ff8fd2;
    ...
}

.article-tag-games{
    ...
    background-color: #f4f4f4;
    ...
}

.article-tag-videos{
    ...
    background-color: #123456;
    ...
}

Answer 1

我会为标签 .article-tag 的主要 css 使用通用类，并使用新类标签 .news 等添加颜色。

.article-tag{
  ... //all the css applied to all the tags
}

.news{ //or .article-tag.news depending on your code 
  background-color: red;
}

并在您的 HTML 中使用

<label class="article-tag news"></label>