1

これは単純な答えの単純な問題だと確信していますが、CSS を使用した経験があまりなく、Google はさまざまな CSS/リストの質問に対する答えを教えてくれるだけです。アドバイスをいただければ幸いです。

id="ttm_nav_header_sale"具体的には、順序付けられていないリスト内の1 つの項目 ( ) のフォントの色を変更したいと考えています。しかし、カスケード スタイルに問題があります。

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

2 に答える 2

0

リンクの色を変更したい場合は、a

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

編集：

上記が機能するように、リンクの特異性は前述の定義よりも大きくする必要があります

http://jsfiddle.net/w7Qn9/

于 2012-12-13T00:02:18.680 に答える
0

これは実際には特異性の問題です。つまり、スタイル シートで以前に定義した 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;
}
于 2012-12-13T00:11:59.500 に答える