0

返信ボタンをフォーマットしようとしています：

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

背景色が変わります。唯一間違っているのは、ハイパーリンクの色が下線付きで表示されていることです（これは私が望んでいないことです）。また、テキストにカーソルを合わせると、テキストの色が白に変わるはずです...

4

3 に答える 3

0

aクラスの前に追加

a.replyBtn:hover
于 2012-04-04T20:19:33.587 に答える
0

CSSは、使用されるセレクターの特異性の順序で機能し、2つのセレクターが同じように特異的である場合は、どちらが最後に来るかによって機能します。CSSを次のように並べ替えます。

.replyBtn {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:link {
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

.replyBtn要素をデフォルトでスタイル設定してから、スタイル内のそれらのデフォルトをオーバーライドしているように見えることを指摘しておき.replyBtn:linkます。同じクラス名を持つ他の要素タイプがあるかもしれませんが、a/ link固有のスタイルを定義する必要があります。これにより、これらすべてのリンク.replyBtn:linkのデフォルトが形成されます。

.replyBtn:link {
    text-decoration: none;
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}

/* all the other stuff... */

OPからのコメントに残されたコメントに応じて編集：

これを試してください：jsfiddle.net/CTxQs。

HTMLマークアップが次のようになっていると仮定します。

<div class="replyBtn"><a href="#btn_comment">Reply</a></div>​

CSSが間違っています。このセレクター：

.replyBtn:link {
}

replyBtnリンクであるクラス名の要素を選択します。これはすべてうまく機能し、a要素のクラスが。の場合は機能します.replyBtn。しかし、そうではありません。a要素は要素の子要素です.replyBtn div。セレクターを次のように修正します。

.replyBtn { /* selects the div */
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}

.replyBtn a:link { /* selects the a that's a child of the div */
    background-color:#333;
    color:#FFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:visited {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}
.replyBtn a:hover {
    background-color:#333;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px;
    font-size:12px;
    text-decoration:none;
}
.replyBtn a:active {
    background-color:#CCC;
    color:#333333;
    font-weight:bold;
    padding:3px;
    font-size:12px;
}​

JSフィドルデモ。

さらに読む、エリックマイヤーから：

于 2012-04-04T20:22:30.320 に答える
0

必要な動作を次のように正常に適用しました

a:link.replyBtn, a:visited.replyBtn, 
a:active.replyBtn, a:hover.replyBtn {...}

私のページでは、すべてのリンクが期待どおりに表示されます。つまり、css クラスに関してです。Chrome では動作していますが、IE では動作していません。まだ動作しています...これが役に立てば幸いです

于 2012-04-05T06:00:24.773 に答える