css hover控制相邻元素样式改变, 这样写无效 ,请教原因

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
    <div class="login_nav">
      <span class="account-nav">1111qqqqqqqqqqqqq1</span>
      <span class="phone-nav">2222qqqqqqqqqqq</span>
    </div>
 
  
</body>
</html>
<style lang="scss">
.account-nav:hover{
  color: red;
}
/* 控制另外一个元素改变, 这样写无效 , 用~ 也无效*  /
.phone-nav:hover+.account-nav{
  color:red
}
</style>

感觉你对相邻选择器有些误解，
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator


<template>
  <div id="app">
    <div class="login_nav">
      <span class="account-nav">1111qqqqqqqqqqqqq1</span>
      <span class="phone-nav">2222qqqqqqqqqqq</span>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>
<style lang="scss">
.account-nav:hover {
  color: red;
}

.account-nav:hover + .phone-nav {
  color: red;
}
</style>

+前面打一个空格呢

你似乎想选择元素的前一个元素，但是+号只能选择后一个元素，所以这个可能比较麻烦，变通一下，把这个元素以前的元素都变h红颜色，后面的都是黑色

.login_nav:hover span{

    color:red;

}
.login_nav span:hover{

  color:black;

}
.login_nav span:hover ~ span{

  color:black;

}

因为你写下面了 调整一下位置



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    /* 控制另外一个元素改变, 这样写无效 , 用~ 也无效 */
    .phone-nav:hover+.account-nav {
        color: red
    }
</style>

<body>

    <div class="login_nav">
        <span class="phone-nav">2222qqqqqqqqqqq</span>
        <span class="account-nav">1111qqqqqqqqqqqqq1</span>

    </div>


</body>

</html>
<!-- <style lang="scss">
    .account-nav:hover {
        color: red;
    }

    /* 控制另外一个元素改变, 这样写无效 , 用~ 也无效*  /
.phone-nav:hover+.account-nav{
  color:red
}
</style> -->

img

你其实是想兄弟元素hover的时候改变前一个元素的颜色，CSS选择器做不到往前选择，但是你可以投机取巧一下，代码如下


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
    <div class="login_nav">
      <span class="phone-nav">2222qqqqqqqqqqq</span>
    </div>
 
  
</body>
</html>
<style lang="scss">
.phone-nav{  
/*设置伪元素*/
      &::before{
        content:'1111qqqqqqqqqqqqq1';
      }

/*hover 的时候，自己的颜色为黑色，before伪类的颜色为红色*/
    &:hover::before{
            color:red
      }
}

/*
然后我看你的代码是account-nav发生hover的时候，自身颜色变成红色，并且兄弟元素也变成红色
那何不直接对父元素做hover，统一都变成红色呢？
.login_nav:hover{
color:red
}

*/
</style>

因为style标签没有放在html标签中


 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style lang="scss">
.phone-nav{  
/*设置伪元素*/
      &::before{
        content:'1111qqqqqqqqqqqqq1';
      }
 
/*hover 的时候，自己的颜色为黑色，before伪类的颜色为红色*/
    &:hover::before{
            color:red
      }
}
 
/*
然后我看你的代码是account-nav发生hover的时候，自身颜色变成红色，并且兄弟元素也变成红色
那何不直接对父元素做hover，统一都变成红色呢？
.login_nav:hover{
color:red
}
 
*/
</style>
<body>
 
    <div class="login_nav">
      <span class="phone-nav">2222qqqqqqqqqqq</span>
    </div>
 
  
</body>
</html>

原因
你的代码没错，修改下两个元素位置即可。

修改如下
修改第22行

.phone-nav:hover+.account-nav

修改为：

.account-nav:hover+.phone-nav

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
    <div class="login_nav">
      <span class="account-nav">1111qqqqqqqqqqqqq1</span>
      <span class="phone-nav">2222qqqqqqqqqqq</span>
    </div>
 
  
</body>
</html>
<style lang="scss">
.account-nav:hover{
  color: red;
}
.account-nav:hover+.phone-nav{
  color:red
}
</style>