0

"li:hover > a" と "li a:hover" は同じです

コードのような

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

と

ul#navigation li:hover > a {
background:#fff;}
4

4 に答える 4

3

まったく違います。これらは 2 つの非常に異なるセレクターです。

 li a:hover

手段:ユーザーがマウスを要素の上に置いたときに、要素の子孫であるa要素にこれらのルールを適用します。li

 li:hover > a

手段:ユーザーが要素の上にマウスを置いたときに、要素の直接の子であるa要素にこれらのルールを適用します。li

ご覧のとおり、いくつかの違いがあります。

  1. まず、最初のセレクターは、アンカー自体がホバーされている場合にのみ、ルールをアンカーに適用します。これは、親リスト項目よりも小さいアンカー要素がある場合、変更をトリガーするためにアンカーの上にマウスを置く必要があることを意味します。
  2. 一方、2 番目のセレクターは、マウスがその親の上に置かれている場所であればどこでも、ルールをアンカーに適用します。
  3. 2 番目のルールは、直接子孫セレクターまたは子セレクター>とも呼ばれる をスポーツし、タグが中間コンテナーなしで に直接含まれている場合にのみルールを適用します。ali
于 2013-07-24T03:52:41.790 に答える
1

いいえ、

li:hover > aaがホバーされたときの スタイルを変更し、liがホバーされたときli a:hoverのスタイルを変更します。aa

ここで違いを参照してください：http://jsfiddle.net/uzyUr/

さらに子>セレクターがあるためa、直接ネストする必要がありますがli、スペースは任意の子孫セレクターであるため、好きなだけaネストすることができますli

于 2013-07-24T03:47:24.943 に答える
0

答えはノーだ。

この部分では、ホバーをトリガーする要素はリンクになります。

ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;}

ここにいる間、ホバーをトリガーする要素はli

ul#navigation li:hover {
background:#fff;}

しかし、次のようなものがある場合：

<ul>
 <li><a href="#"></a></li>
</ul>

両方の CSS が機能します。一方、次のようなことをすると：

<ul>
 <li><div></div></li>
</ul>

1 つ目は機能しませんが、2 つ目は機能します。

しかし、「>」のようなものがある場合

ul#navigation li:hover > a{
    background:#fff;}

どちらも技術的にはリンクまたは<a>タグは同じですが、もちろん は<li>リンクの前に存在する必要があります。

于 2013-07-24T03:47:08.597 に答える
0

これがデモを理解するためのデモです

最初にテキストにカーソルを合わせると、a色が緑色に変わります

次にテキストのすぐ外側にカーソルを合わせると、a色が赤に変わります

結論

ul#navigation li a:hover

a にカーソルを合わせると、a のスタイルが変更されます

ul#navigation li:hover > a

a のスタイルは、li をホバーすると変更されます

于 2013-07-24T03:58:24.130 に答える