0

これが私のコードです：

<html>
<head>
<style type="text/css">
   p:hover{border:2px solid red;}
</style>
</head>
<body>
   <p style="border:2px solid green;">This is a paragraph.</p>
</body>
</html>

混乱しています:ホバー時に境界線の色が変わらないのはなぜですか?

4

3 に答える 3

5

インライン スタイルは、そうでない CSS ルールよりも優先度が高くなります!important。したがって、解決策は、p:hoverルール内の属性を重要としてマークすることです。

p:hover {
    border:2px solid red !important;
}

別のオプションとして、初期スタイルを<style>タグに移動することもできます。

p {
    border: 2px solid green;
}

p:hover {
    border: 2px solid red;
}

これは、CSS の優先順位に関する TL;DR スタイルの説明です。もう少し長いものが必要な場合は、CSS 仕様の関連部分を参照することもできます。

于 2013-03-10T18:54:14.040 に答える
2

インライン スタイルは、個別の CSS セクションよりも優先度が高い

編集:ため息2番目-少し遅すぎます。

これはうまくいくはずです-私が知る限り、!important良い習慣とは見なされないので、このアプローチを使用することをお勧めします:

<style type="text/css">
p{border:2px solid green;}
p:hover{border:2px solid red;}
</style>
<body>
<p>foobar</p>
</body>
于 2013-03-10T18:54:46.793 に答える
1

CSS にしかアクセスできない場合 (たとえば、別の部門が HTML を所有している、または別の方法で導入されているため)、 を使用する必要があります!important。の使用!importantはまったく問題ありません。これは、まさにこのような状況に対する救済策となることを目的としているためです。それが「悪い習慣」であるという考えは間違っています (CSS の特異性について怠惰に使用している場合を除きます)。

p:hover{border:2px solid red !important}

<body>
    <p style="border:2px solid green">foobar</p>
</body>

ブラウザには、 などp:hoverの場合のように組み込みの CSS 宣言がありませんa:hover, a:active, a:visited。したがって、HTML のインライン スタイルは、実行時に認識される唯一のスタイルです。スタイル!importantを指定できるが存在しない限り。:hover

于 2013-03-10T19:10:13.990 に答える