Question

我确定这是一个简单的问题，答案很简单，但我没有太多使用CSS的经验，谷歌搜索只是指导我找到不同的CSS /列表问题的答案。所以任何建议都会非常感激。

具体来说，我想在无序列表中更改单个项目（id="ttm_nav_header_sale"）的字体颜色。但我遇到了级联风格的问题。

HTML如下：

<div id="ttm_nav_header">
<ul>
    {% for link in linklists.main-menu.links %}
        {% if link.title == "Drums" or link.title == "Accessories" %}
            <li rel="nav_{{ link.title }}"><a href="{{ link.url }}">{{ link.title }}</a>&nbsp;&nbsp;&nbsp;/</li>
        {% elsif link.title == "Sale" %} 
            <li id="tmm_nav_header_sale" ><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% else %}
            <li><a href="{{ link.url }}">{{ link.title }}</a>&nbsp;&nbsp;&nbsp;/</li>
        {% endif %}
    {% endfor %}
</ul>

的CSS：

#ttm_nav_header ul li a:link, #ttm_nav_header ul li a:visited, #ttm_nav_sub ul li a:link, #ttm_nav_sub ul li a:visited {
    text-decoration:none;
    color:#000;
}

#ttm_nav_header ul li a:hover, #ttm_nav_sub ul li a:hover {
    text-decoration:none;
    color:#229fdb;
}

/* !!! HERE */
#tmm_nav_header_sale {
    font-weight:bold;
    color: red;
}

Answer 1

我假设您要更改链接颜色，在这种情况下，您需要定位a

#ttm_nav_header ul li#tmm_nav_header_sale a {
    font-weight:bold;
    color: red;
}

编辑：

链接的特异性需要大于前面的定义，因此上述应该起作用

http://jsfiddle.net/w7Qn9/

Answer 2

这实际上是一个特殊问题，即您之前在样式表中定义的css类优先于您希望使用不同样式定位的链接。

这是一个更好的结构：

#ttm_nav_header a {
    text-decoration:none;
    color:#000;
}

#ttm_nav_header a:hover, #ttm_nav_sub a:hover {
    text-decoration:none;
    color:#229fdb;
}

/* !!! HERE */
#ttm_nav_header #tmm_nav_header_sale a {
    font-weight:bold;
    color: red;
}

如何在列表中更改单行项目的样式？

2 个答案: