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

This is actually a specificity problem, i.e. the css classes you've defined earlier in your style sheet have taken precedence over the link you want to target with a different style.

Here's a better structure:

#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;
}

Answer 2

I assume you want to change the link colour in which case, you'll need to target the a

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

EDIT:

The specificity of the link needs to be greater than the preceding definitions so the above should work

http://jsfiddle.net/w7Qn9/