如何在列表中更改单个订单项的样式？

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