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

　　

代码一：
<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. 【Alpha版本】 第四天 11.10

    一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 填写招聘时用户填写各个日期到可以使用工具方便选择日期的修改 完成了 ...

  2. C++ Virtual

    摘自:http://www.cnblogs.com/xd502djj/archive/2010/09/22/1832912.html namespace QCAR { /// Area is the ...

  3. JavaWeb---总结(十四)JSP原理

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  4. HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

    HTML <!DOCTYPE> 标签 <!DOCTYPE html> <html> <head> <title>文档的标题</titl ...

  5. Java Connection.setAutoCommit

    Java setAutoCommit 默认为true,即每条SQL语句在各自的一个事务中执行. 很多时候需要有多个操作在一个事务执行,如循环插入,此时可在插入开始前设置 conn.setAutoCom ...

  6. linux设置和删除环境变量

    删除环境变量: unset -v PKG_CONFIG_PATH 添加环境变量: export PKG_CONFIG_PATH="你需要设置的路径", 例如: export LAN ...

  7. xcode

    1: info.plist IOS之Info.plist文件简介 http://www.apkbus.com/android-130240-1-1.html 在Xcode项目中读取plist文件 ht ...

  8. GoLang之基础

    GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...

  9. Kindeditor 代码审计

    <?php /** * KindEditor PHP * * 本PHP程序是演示程序,建议不要直接在实际项目中使用. * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置. * */ r ...

  10. Web Site 开发学习

    http://web-source.net/web_design_languages.htm#.Vw4uaeRJmt9 http://www.make-a-web-site.com/web-desig ...