首页 > 代码库 > 兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
在做兄弟元素 和 相邻元素的 移入移出控制显示与否的功能的时候，发现了一个问题，具体代码如下：
<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就不会发生改变，如下截图：
由此我们可以得出一个结论， 兄弟选择器或者相邻选择器，永远是从前到后控制 它的兄弟元素和相邻元素，而不能从后到前控制 它的兄弟元素和相邻元素，这个只是我在测试中退出的一个结论，尚待考证，希望各位码友批评指正。
兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。