如何在列表中更改單個訂單項的樣式？

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