html - 为 tumblr 主题上的每个标签设置不同的样式

Question

我正在编写一个 tumblr 主题，我希望帖子显示特色标签(每个标签都有不同的背景样式)

例子: http://i.imgur.com/kUittaX.jpg

多亏了这个答案，我得到了一半:Using different styles for categories in tumblr?

当显示单个标签时，代码可以完美运行。每个帖子都有不同的标签和不同的背景颜色，但是当 2 个或更多标签显示在同一个帖子上时，样式会影响所有标签，使它们具有相同的背景。

它是这样的:http://i.imgur.com/35PUtit.jpg

我的代码:

CSS

#tags {
    position: relative;
    display: block;
    margin: 0 14px 14px 14px;
}

#tags a {
    background-color:;
    color: #fff;
    padding: 3px 6px 3px 6px;
    margin-right: 6px;
    border-radius: 3px;
}

div.featured #tags a {
   background-color: #[custom green];
}

div.news #tags a {
   background-color: #[custom blue];
}

HTML

{block:Posts}
    <div class="post {TagsAsClasses}">
     Post Content...

{block:HasTags}
    <div id="tags">
      {block:Tags}
         <a href="{TagURL}">{Tag}</a>
      {/block:Tags}
    </div>
{/block:HasTags}

    </div>
{/block:Posts}

提前致谢

Answer 1

你的实现逻辑是错误的。当您应用类型选择器时，它会影响具有该类型的所有元素。

因此假设您的 tags div 中有 2 个标签，每个标签都是一个 a 元素。使用 #tags a 选择器将为您提供所有这 2 个元素。这就是为什么您所有的标签都具有相同颜色的原因。

我认为您应该首先更改您的 HTML 代码，因为如果您的代码是这样的话，您就不能对每个标记使用不同的选择器。

尝试更改此行并将标签名称作为类添加到元素中:

<a href="{TagURL}">{Tag}</a>

收件人:

<a href="{TagURL}" class="{Tag}">{Tag}</a> 

所以在你的 css 中，如果你使用类选择器，你将只能更改那个标签。

#tags a.{Tag} {
   background-color: red;
}

这意味着输出的 HTML 和 CSS 必须是这样的:
HTML

<div id="tags">
    <a href="tags-comics" class="comics">comics</a>
    <a href="tags-cats" class="cats">cats</a>
</div>

CSS

#tags a.comics {
    background-color: red;
}
#tags a.cats {
    background-color: blue;
}

但是，此实现不是原型(prototype)，因为您实际上无法确定用户将定义哪些标签。您应该尝试设置 tag-1、tag-2、tag-3 等类。