css - CSS and specificity - class vs ids

Question

Consider the following html:

<div id="rightBar">
    <div class="barElement">
        <div class="barText"><a href="#">Not underlined</a><br /></div>
        <div class="barLinks"><a href="#">Should be underlined</a></div>
    </div>
</div>

And the following css:

#rightBar a
{
    text-decoration: none;
}
#rightBar a.barLinks
{
    text-decoration: underline;
}

The 'Should be underlined' link is not underlined, shouldn't it be since it inherits both the class barLinks and the id rightbar. Also the '#rightBar a.barLinks' (0, 1, 1, 1) has more specificity than '#rightBar a' (0, 1, 0, 1), so it should override the latter right?

How else can I get the 'Should be underlined' link to be underlined without resorting to using any inline specifications (both css or html)

score 7 · Accepted Answer

要素にクラスがありませaんbarLinks。これを行う：

#rightBar .barLinks a
{
    text-decoration: underline;
}

例： http： //jsfiddle.net/J34mj/2/

score 2 · Accepted Answer

これは特異性の問題ではありません。間違ったセレクターを使用しています。これである必要があります：

#rightBar .barLinks a {}

score 1 · Accepted Answer

#rightBar a.barLinks
{
    text-decoration: underline;
}

class = "barLinks"がオンになっていないため、機能しません<a>

これを試して;

#rightBar .barLinks a
{
    text-decoration: underline;
}

またはそれを失敗します。

#rightBar .barLinks a
{
    text-decoration: underline !important;
}

score 0 · Accepted Answer

そうすべきではありません。barLinksはタグにのみ適用できます。cssを#rightBar.barLinksに変更すると、機能するはずです。

score 0 · Accepted Answer

したがって、ここで私が見ている問題は、CSSセレクターを使用してアンカータグ要素に到達するための誤ったアドレスについて言及していることです。より長く、より目立つアドレスルートを使用する場合は、次のようになります。

#rightbar .barElement .barLinks a{
    text-decoration : underline;
}

しかし、より具体的なものを探しているので、アンカータグに独自のクラスがないという事実を除いて、アプローチは正しかったので、a.barLinkは何も見つけません。それはむしろ次のようになります：

#rightBar .barLinks a{
text-decoration : underline;
}

css - CSS and specificity - class vs ids

5 に答える 5

Related

Reference