首页 > 其他 > 详细

兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式

时间:2017-03-19 01:38:05      阅读:287      评论:0      收藏:0      [点我收藏+]

在做兄弟元素 和 相邻元素的 移入移出控制显示与否的功能的时候,发现了一个问题,具体代码如下:

<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就不会发生改变,如下截图:

技术分享

由此我们可以得出一个结论, 兄弟选择器或者相邻选择器,永远是从前到后控制 它的兄弟元素和相邻元素,而不能从后到前控制 它的兄弟元素和相邻元素,这个只是我在测试中退出的一个结论,尚待考证,希望各位码友批评指正。

兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式

原文:http://www.cnblogs.com/233liyj/p/6576878.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!