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

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

<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

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

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

css代码中的加号(+)相邻选择器的作用

css代码中的加号(+)相邻选择器的作用:本章节介绍一下css中相邻选择器的作用,此选择器用加号(+)表示.此选择器能够匹配前面的选择器紧邻的兄弟元素.代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &l

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

css交集选择器、并集选择器、兄弟选择器

一,交集选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-css交集选择器.html</title> <!-- 交集选择器,相交的部分就是要设置属性值的标签 1,格式: 选择器1选择器2...{ 属性:值; } 2,注意点: (1),选择器之间没有任何的连接符号 (2),选择器可以是标签

CSS 相邻选择器(七)

一.相邻选择器 相邻选择器前后部分之间用一个加号(+)隔开,前后两部分选择反符在结构上属于同级关系,如 相邻选择器,是根据左侧选择符指定相邻元素,然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素 二.简单例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery选择器--&gt;当前元素的父元素的兄弟元素的子元素

<script> // jQuery 加载函数 $(function () { // 设置文本框的readonly属性 $(":text").attr("readonly","readonly"); // 点击事件 $(":text").click(function () { // 获取当前元素的父元素的指针 也就是 爸爸在他们的兄弟中排行老几 var i = $(this).parent().index(); /

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

总的来说,选择器引擎规则就是: $('查询字符串'). 最常用最基本的就是:1.标签选择器(以文档元素作为选择符):$("div"): 2.id选择器(以ID作为选择符): $("#demo1"): 3.类选择器(以class作为选择符): $(".selected"): 4.群组选择器: $(".class1, .class2, .class3"): 5.后代选择器: $("p span") 多种规则的组

CSS3系列一(概述、选择器、使用选择器插入内容)

CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[attr=val]表示具有属性att且其值等于val E[attr*=val]表示具有属性attr且其值中包含val E[attr^=val]表示具有属性attr且其值以val开头 E[attr$=val]表示具有属性attr且其值以val结尾 事实上除了以上四个之外还有俩用的相对比较少的属性选择器,那就

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu