css - 更改烧瓶中动态内容的备用链接的字体颜色

Question

我正在使用烧瓶中的 for 循环和 jinja 模板在屏幕上放置动态内容。我想更改放置的备用链接的字体颜色。我尝试nth-child过如下使用，但它似乎不起作用。

我的代码

Jinja 模板中的动态内容

        {% for item in data %}
        <div class="removeLink">
            <a id="link" href="{{item['link']}}">
                <div id="news">{{item['title']}}</div>
            </a>
        </div>

        {% endfor %}

我的 CSS

    #news{
        color: white;
        font-size: 20px;
        margin-bottom: 4%;
        margin-top: 1%;
        margin-left: 1%;
        word-wrap: break-word;
    }
    .removeLink a{
        text-decoration: none;
    }

    .removeLink:last-child { 
        margin-bottom: 0px !important; 
    }       
    .removeLink:nth-child(2n) { 
        color: red !important; 
    }

标签： cssflaskjinja2

Answer 1

#newsCSS 选择器比选择器对链接文本具有更高的特异性.removeLink:nth-child(2n)。

调整选择器以创建更高的特异性。如果您有兴趣，请阅读有关 css specificity的更多信息。

以下应该有效：

.removeLink:nth-child(2n) #news { 
    color: red !important; 
}