css中hover遇到的坑

定义：

:hover 选择器用于选择鼠标指针浮动在上面的元素。
:hover 选择器适用于所有元素

这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色 
a:hover
        background-color:yellow;

这个是最普通的用法了，只是通过a改变了style


  • 用法2：控制其它元素
    
使用a控制a的子元素 b：
    • 

    .a:hover .b {
        background-color:blue;

    使用a控制a的兄弟元素 c(同级元素)：
    

    .a:hover + .c {
        color:red;

    使用a控制a的就近元素d：
    

    .a:hover ~ .d {
        color:pink;

    总结一下：
    

  • 中间什么都不加  控制子元素；
    • 

  • ‘+’ 控制同级元素（兄弟元素）；
    • 

  • ‘～’ 控制就近元素；
    • 

  • 在控制子元素的时候，不需要在hover后面多此一举的加上父元素的声明
    • 

  • ~ + 控制就近元素和同级元素时，要把被控制的元素写在后面，不然无法生效。
    
1. 相邻兄弟选择器 +
    
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
    
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
    
2.后续兄弟选择器 ~
    
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
    • 

    代码验证：
    

    <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            background-color: aqua;
            width: 100%;
            height: 200px;
            z-index: 99;
            /* ;
            overflow: hidden;
            transition: height 0.5s; */    
            height: 100px;
            width: 100px;
            background-color: red;
            height: 50px;
            width: 100px;
            background-color: rgb(124, 190, 144); 
        /* C如果放在A后面不生效 */
        /* .C:hover ~ .A{
            height: 300px;
        /* C如果放在A后面不生效 */
        .C:hover + .A{
            height: 300px;
        /*这种用法是无效的，子元素不用加上父元素声明
         .A:hover .A .B{
            background-color: blue;
        .A:hover .B{
            background-color: blue;
    </style>
</head>
    <div class="C">Button</div>
    <div class="A">
        <div class="B"></div>
    <div class="C">Button</div>