码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:样式   css   ott   不能   代码   title   截图   ack   blog   

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

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

技术分享

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

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

标签:样式   css   ott   不能   代码   title   截图   ack   blog   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!