在做兄弟元素 和 相邻元素的 移入移出控制显示与否的功能的时候,发现了一个问题,具体代码如下:
<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid blue;
display:inline-block;
}
#left:hover,#right:hover{
background-color:#eee;
}
#left:hover ~#right{
border:2px solid red;
}
#right:hover ~#left{
border:2px solid red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
当鼠标移入left 的时候,我们发现right发生了改变,但是我们如果把鼠标移入到right的时候,left就不会发生改变,如下截图:
由此我们可以得出一个结论, 兄弟选择器或者相邻选择器,永远是从前到后控制 它的兄弟元素和相邻元素,而不能从后到前控制 它的兄弟元素和相邻元素,这个只是我在测试中退出的一个结论,尚待考证,希望各位码友批评指正。
时间: 2024-10-12 20:07:38