相邻兄弟选择器定义：选择紧接在另一个元素后的元素，而且两者有着相同的父元素。

　　

代码一：
<body>

　　<h1>This is a heading.</h1>

　　<p>This is paragraph.</p>

　　<p>This is paragraph.</p>

　　<p>This is paragraph.</p>

　　<p>This is paragraph.</p>

　　<p>This is paragraph.</p>

</body>

使用选择器

h1 + p{

     color: red;

}

效果：

这里只会选择第一个p元素，原因是只有第一个p元素与h1关系是紧接着的构成相邻兄弟，第一个p元素之后的p都不与h1紧接着。

　　　　
　　代码二：
　　<body>

             <li>111</li>

             <li>111</li>

             <li>111</li>

         </ul>

         <ol>

             <li>111</li>

             <li>111</li>

             <li>111</li>

         </ol>

    </body>

　　

　　使用选择器

　　li + li {

   　　 color: red;

　　}

　　效果：

　　

　　为什么每一个li都应用了样式啊？

　　因为第二个li之后，每两个li之间都直接都构成了紧接着的li + li关系，所以都被选中了

CSS相邻兄弟选择器的更多相关文章

  1. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  2. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

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

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  4. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  5. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  6. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  7. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  8. CSS 相邻元素选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使 ...

  9. css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

随机推荐

  1. Nuxt.js logoVue.js 后端渲染开源库 Nuxt.js

    Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js. 目前尚处于开发阶段,1.0 版本即将发布 1 分钟视频演示 Nuxt 基于 ES2015,这使得代码有着更愉快 ...

  2. ecshop 远程图片本地化

    define('IN_ECS', true); require(dirname(__FILE__) . '/includes/init.php'); $smarty->assign('siteD ...

  3. 深入JVM-垃圾回收概念与算法

    一.认识垃圾回收 谈到垃圾回收(Garbage Collection,简称GC),GC中的垃圾,特指存在于内存中的.不会再被使用的对象.对于内存空间的管理来说,识别和清理垃圾对象是至关重要的. 二.常 ...

  4. xbmc的静态链接办法

    XBMC是一个相当酷的音频/视频播放器,号称家庭影视中心. 我是希望静态将一些库链接进可执行程序的,这样我用的ArchLinux就不用天天在更新一些东西了 但XBMC试了很多次,编译成功后,总是在运行 ...

  5. 复习---JS-Array 对象

    要开始做第一个js练习了.前面三个小题都是数组的.先来复习一下数组.如下是W3C上面的关于数组的内容. 之前笔记中的内容:http://www.cnblogs.com/lal-fighting/p/5 ...

  6. WinForm------TreeList实现鼠标经过节点背景色改变

    转载: http://www.cnblogs.com/zfanlong1314/archive/2012/06/26/2564124.html

  7. easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  8. Java http方式提交短信到短信网关

    URL url = new URL("短信网关url"); 一般短信内容需要用URLEncoder.encode()编码一下 HttpURLConnection httpCon = ...

  9. MySQL学习笔记——函数

    常用函数 ALTER TABLE tb_emp ); #插入数据 INSERT INTO tb_dept() VALUE(,'市场部','负责市场工作'); # concat 连接 SELECT CO ...

  10. 深入浅出MyBatis

    参考文献:深入浅出MyBatis MyBatis功能架构图: MyBatis内部原理流程图: 详情见:深入浅出MyBatis