CSS3中的差异：悬停选择器

这两者有什么区别

footer:hover a{}

及

这在我们的CSS3课程中引起了一些混乱，我对它的研究并没有对它有多大的帮助。

footer:hover a{}

它的define footer元素位于要应用的元素中

其中作为页脚a:悬停{}

它在元素中定义页脚元素以应用悬停效果

检查演示 HTML 页脚：将鼠标悬停在{}

它的define footer元素位于要应用的元素中

其中作为页脚a:悬停{}

它在元素中定义页脚元素以应用悬停效果

检查演示 HTML 页脚：悬停a是一个伪选择器。如果将鼠标悬停在页脚的任何部分上，它将以页脚为目标：鼠标悬停a是一个伪选择器。如果将鼠标悬停在页脚的任何部分上，它将以

匹配以显示差异

希望这能说明问题

匹配以显示差异

希望这能说明问题

footer:hover一个{color:red}选择锚元素，并且仅当页脚悬停时才将颜色更改为红色

页脚a:hover{color:red}每当锚元素位于页脚内部并且也被悬停在其上时，就会更改锚元素的颜色

举个例子：

假设页脚除了锚之外还有其他元素

<footer>
  <div> I am div</div>
  <a> I am anchor </a>
</footer>

现在，当您将鼠标悬停在div上时，在第一种情况下，它会将锚点的颜色更改为红色。因为div是footer的一部分，而且footer也处于悬停状态，所以选择器将应用并更改其颜色

第二个例子：

<a> Anchor 1: I am outside footer  </anchor>
<footer>
   <a> Anchor2: I am anchor </a>
</footer>

现在，在案例2中，如果您将鼠标悬停在锚点1上，它不会将颜色更改为红色，因为它不在页脚内，而将鼠标悬停在锚点2上会更改其颜色。

footer:hover a{color:red}选择锚点元素并仅在页脚悬停时将颜色更改为红色

页脚a:hover{color:red}每当锚元素位于页脚内部并且也被悬停在其上时，就会更改锚元素的颜色

举个例子：

假设页脚除了锚之外还有其他元素

<footer>
  <div> I am div</div>
  <a> I am anchor </a>
</footer>

现在，当您将鼠标悬停在div上时，在第一种情况下，它会将锚点的颜色更改为红色。因为div是footer的一部分，而且footer也处于悬停状态，所以选择器将应用并更改其颜色

第二个例子：

<a> Anchor 1: I am outside footer  </anchor>
<footer>
   <a> Anchor2: I am anchor </a>
</footer>

---

现在，在案例2中，如果您将鼠标悬停在锚点1上，它不会将颜色更改为红色，因为它不在页脚内，而将鼠标悬停在锚点2上会更改其颜色。

没有伪选择器。footer:hover a很简单，是一个选择器，其中一个组件：：hover是一个伪类，它会根据放置位置影响不同的元素。没有伪选择器。footer:hover a非常简单，是一个选择器，其中一个组件：：hover是一个伪类，它会影响不同的元素，具体取决于您放置它的位置。请注意，虽然您的类可能为新技术而将其称为CSS3，但该语言本身称为CSS，并且：hover不是一个新的CSS3特性。请注意，虽然您的类可能因为新技术而将其称为CSS3，但该语言本身称为CSS，并且：hover不是一个新的CSS3特性。

footer a:hover {
    background: green;
}

footer:hover a{}

<footer>                                <---  hovered
    <a href="#">Some text</a><br/>      <--- both matched
    <a href="#">Some text 2</a>         <--- both matched
</footer>
<a href="#">Lost in dark</a>            <--- unmatched, as it's not a child of <footer>

footer a:hover{}

<footer>
    <a href="#">Some text</a><br/>      <--- hovered, matched
    <a href="#">Some text 2</a>         <--- unmatched
</footer>
<a href="#">Lost in dark</a>            <--- hovered, but then also unmatched, as not a child of <footer>

<footer>
  <div> I am div</div>
  <a> I am anchor </a>
</footer>

<a> Anchor 1: I am outside footer  </anchor>
<footer>
   <a> Anchor2: I am anchor </a>
</footer>