时间戳

首页 > 解决方案 > 我怎样才能简单地文章标签？我正在重用相同的 10 行代码，唯一的区别是标签颜色

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

问题描述

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

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

有没有更有效的方法来做到这一点？

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

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

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

标签： htmlcss

解决方案

我会为标签的主要 css 使用通用类，并使用新的类标签等.article-tag添加颜色。.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>

推荐阅读