html - 如何更改列表中单行元素的样式？

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/