2

編集：

CSS を確認した後、頭に大きな穴が開いていることに気付きました。実際の問題は、 でcolorルールを定義していなかったという単純な事実でbar.css .footer-link:hoverあり、明らかに のカラー ルールfoo.css a:hoverが適用されていました。CSS 101. 今日は金曜日です。私は明らかに週末が必要です。ご協力いただきありがとうございます！

プロジェクトの UI に取り組んでいるときに興味深いものを見つけました。これは、CSS の特異性を取り巻く私の理解不足に関連していると確信しています。私はいくつかの調査を行いましたが、まだ自分の問題を解決できないようです。

とにかく、2 つの異なるスタイルシートに含まれるアンカー要素の定義済みのスタイルがいくつかあります。簡単にするために、それらfoo.cssを と と呼びますbar.css。foo.css前のページに含まれていますbar.css

にfoo.cssは、次のルールがあります。

a {
    color: #0088cc;
    text-decoration: none;
}

a:hover {
    color: #0088cc;
}

にbar.cssは、次のルールがあります。

.footer-link {
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: rgb(150, 150, 150);
    font-size: 13px;
    line-height: 18px;
    margin-right: 6px;
}

.footer-link:hover {
    background-color: rgba(255, 191, 254, 0.8);
    text-decoration: none;
}

HTML マークアップは次のとおりです。

<a href = "#" class = "footer-link">Cheese is really good</a>

私が理解しているように、より特異性が高いにもかかわらず、スタイルhoverが適用されているようです。予想どおり、通常のアンカー スタイルが適用されています。foo.css.footer-link:hover

だから私の質問は：

ホバー ルールがページの後半に含まれており、より具体性が高いはずなfoo.cssのに、なぜホバー ルールが適用されるのですか?bar.css.footer-link:hovera:hover

前もって感謝します！

jsFiddle の例

4

3 に答える 3

2

両方のスタイルが適用されています。.footer-link:hoverよりも具体的であることは正しいですが、表示a:hoverされているのは両方のスタイル定義の組み合わせです。これは、カスケード スタイル シートのカスケード部分です。

あなたのaとa:hoverスタイルが最初に適用され、その後、より高い特異性.footer-linkと.footer-link:hoverスタイルが適用され、明示的に定義されたプロパティ ( などbackground) のいずれかが以前の定義を上書きします。

colorただし、スタイルでリンクを指定していないため、代わりに.footer-link:hoverからプロパティを継承しますa:hover。

ここでの特異性は想定どおりに機能しています。継承と特異性がどのように機能するかについて少し混乱しているだけです!

于 2013-07-26T18:04:44.157 に答える
2

複数のルール セットを 1 つの要素に適用することは可能であり、通常のことです。最初に a をa:hover適用しcolor、次にaおよびを.footer-link:hover適用します。競合するスタイルがある場合、 のスタイルが優先されますが、競合するスタイルはありません。したがって、2 つのルール セットのスタイルが組み合わされます。background-colortext-decoration.footer-link:hover

colorfromを適用したくない場合は、で再度a:hover設定して元に戻す必要があります。color: #0088cc.footer-link:hover

于 2013-07-26T18:05:07.773 に答える
1

セレクターによって設定されるプロパティは異なりますが、両方が一致するため、両方が適用されます。問題のブロックにプロパティが設定されてbar.cssいる場合、クラス セレクター(優先度 0,0,2,0) は要素セレクター (優先度 0,0,1,1) よりも具体的であるため、 内のプロパティ セットをオーバーライドします。これもここでしなければならないことです: で、後のブロックをcolorfoo.css.footer-link:hovera:hoverbar.css

.footer-link:hover {

    /* the new line */
    color: <whatever should be the color of .footer-link when hovering>

    background-color: rgba(255, 191, 254, 0.8);
    text-decoration: none;
}

（私はあなたrgb(150, 150, 150)が現在の状況で望んでいると信じています。）

于 2013-07-26T18:05:12.950 に答える