前端学习总结【101天】：CSS——关于伪类hover选择器的测试

随便叨叨

关于：hover这个伪类选择器的使用方法，之前耽误了我超多时间，测试了蛮久，拿出来说下。

学习总结

通过伪元素、伪类无法实现子元素选择父元素，后面的元素选择前面的元素。

一、初始代码

.grandfather {
    height: 300px;
    background: gray;
}
    
.father {
    height: 200px;
    background: blue;
}
    
.grandfather div p {
    margin: 0;
    background: yellow;
    border: solid 1px red;
}

<div class="grandfather">
    <div class="father">
        <p class="chlid1" id="child1-1">1</p>
        <p class="chlid2">2</p>
        <p class="chlid3">3</p>
    </div>
</div>

二、测试代码

测试1

---

• 问题：从父元素向子元素选择时：hover后面能选择什么？

  /*从父元素向子元素【类名】选择——无效*/
  .father:hover .child1 {
      background: black;
  }
  
  /*从父元素向子元素【ID名】选择——无效*/
  .father:hover #child1 {
      background: black;
  }
  
  /*从父元素向子元素【标签名】选择——有效*/
  .father:hover p {
      background: black;
  }
  
  /*从父元素向子元素选择——有效*/
  .grandfather:hover div p {
      background: black;
  }
  
  /*从父元素向子元素选择——无效*/
  .grandfather:hover .grandfather div p {
      background: black;
  }
  

• 结论： ：hover后面可选择标签名，但不可以选择类名、ID名【有都不能有】。

测试2

---

• 问题：怎么选择自己？

  /*这样选择自己——有效*/
  .grandfather:hover {
      background: black;
  }
  
  /*这样选择自己——有效*/
  div.grandfather:hover {
      background: black;
  }

• 结论：选择自己可以使用div.类名或者直接用类名

测试3

---

• 问题:在:hover前加一个空格会怎样？

    /*这样选择——有效【但是只针对鼠标悬浮的位置,且.grandfather不算在内】*/
    .grandfather :hover {
        background: black;
    }

    /*这样选择子元素——无效*/
    .grandfather :hover div p {
        background: black;
    }

• 结论:可以在：hover前加空格，但是它之后不可再用别的标签。

三、个人总结

• ：hover后面可选择标签名，但不可以选择类名、ID名【有都不能有】。

• 选择自己可以使用div.类名或者直接用类名

• 可以在：hover前加空格，但是它之后不可再用别的标签。

四、参考资料

关于css中hover的用法，如何编写代码才能完成下面的功能？还是说不能完成？