Question

我正在编写一个tumblr主题，我希望帖子能够显示特色标签（每个都有不同的背景风格）

我得到了一半，感谢这个答案：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选择器将为您提供所有这两个元素。这就是为什么你的所有标签都具有相同的颜色。

我认为您应该首先更改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;
}

但是，此实现不是原型，因为您无法确定用户将定义的标记。你应该尝试设置类似tag-1，tag-2，tag-3等的类。

为tumblr主题上的每个标记设置不同的样式

1 个答案: