<!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>
8条回答 默认 最新
关注
感觉你对相邻选择器有些误解,
相邻兄弟选择器 (+) 介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报