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

　　

代码一：
<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. bootstrap学习总结-05 常用标签3

    1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> ...

  2. collectionView

    // /* UICollectionView 类是iOS6 新引进的API,用于展示集合视图, 布局更加灵活,可实现多列布局,用法类似于UITableView类. - 更新视图: [collectio ...

  3. Sublime Text 3 快捷键整理

    选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.Ctrl+L 选中整行,继续操作则继续选择下一行, ...

  4. htons

    在Windows和Linux网络编程时需要用到的,用来将主机字节顺序转化为网络字节顺序,以Windows下的代码为例: 1 2 #include<winsock2.h> u_shortht ...

  5. 后台程序员的HTTP缓存

    1.后端程序员只需要关注请求头: if-None-Match //上一次response头中的ETag的值. 响应头: Etag //是URL的Entity Tag,用于标示URL对象是否改变,区分不 ...

  6. JS中两个重要的方法 call & apply 学习

    正题: Function.prototype.apply(instance,args)  //args 数组 Function.prototype.Call(instance,a1,a2)  //a1 ...

  7. asp.net 中的app_offline.htm的使用

    前段时间,系统升级,由于系统更新发布时间较长,所以必须停掉站点进行更新.导致很多用户都来反馈系统无法访问,还认为站点被黑掉了. 所以经过那件事我们也在思考,如何做到不停机,进行热部署.单机环境下(双机 ...

  8. Robot Framework--01 创建简单工程示例

    1.新建Project: 填写name,选择Type为Dirctory,路径根据自己需要选择,建议最好不要在中文路径下,以免发生问题:

  9. wordpress数据库表说明

    wp系统所用的表不多,那么每张表具体都存些什么?今天给大家介绍一下,希望对你有帮助. wp_commentmeta: 用于保存评论的元信息,在将评论放入回收站等操作时会将数据放入此表,Akismet等 ...

  10. ServiceBase 备份

    using CanDoo.Contracts; using CanDoo.Core.Data; using System; using System.Collections.Generic; usin ...