css - css階層を設定する方法

Question

CSSでメインクラスのリンクをオレンジに設定していますが、続きを読むリンクを白に設定したいので、何も機能していません。

OK、これがページ設定です：

<div class="entry_post">
<a href="http://localhost/" class="more-link">
Read More
</a>
</div>

私のCSS：

.entry_post a {
    color:#FF8800;
}
.entry_post .more-link a{
        color:#ffffff;
}
.more-link {
    color:#ffffff;
}

私は何か間違ったことをしていると確信していますが、私の人生では何が悪いのかわかりません。

score 2 · Accepted Answer

ここには 2 つの問題があります。

.entry_post .more-link a{
    color:#ffffff;
}

これは正しくありません: 上記のルールは、要素の子孫であるアンカー要素 ( a) をクラス (クラスの子孫) と一致させます。あなたが望むものは：.more-link.entry-post

.entry_post a.more-link {
    color:#ffffff;
}

第二に、すでにを持っていても、(より具体的な).more-link {color: #ffffff;}によってオーバーライドされている.entry_post aため、適用されません。しかし、最初の問題を修正すれば、これを気にする必要はまったくありません。

score 1 · Accepted Answer

タグとクラスセレクターを組み合わせる必要があります（タグセレクターはオプションです）。

.entry_post a.more-link {
        color:#ffffff;
}

.entry_post .more-link aaで、を.more-link意味するため、機能しません.entry_post。シンプルの問題は、.more-linkより.entry_post a具体的であるため、それをオーバーライドすることです。

score -2 · Accepted Answer

試す

.entry_post a {
    color:#FF8800;
}
.entry_post .more-link {
        color:#ffffff !important;

}

あなたはそこにいくつかの冗長性を持っていました

3 に答える 3