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

　　

代码一：
<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. Beta版本冲刺第四天 12.10

    一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 日期合理性的判断,一个是用户反馈的查看 管 ...

  2. 在linux下安装tesseract-ocr

    1. 在ubuntu下可以自动安装  [html]   技术分享技术分享    sudo apt-get install tesseract-ocr  2.编译安装    a.编译环境: gcc gc ...

  3. bootstrap学习总结-01 环境准备

    1 下载Bootstrap Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前下载的Bootstrap版本为v3.3.7 htt ...

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

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

  5. awk多模式匹配

    awk -F ':' '{if(($1 ~/wlan/)||( $1 ~/Cell/)||($1 ~/Quality*/)) {print $0}}'

  6. java实现Haffman编码

    1.先创建一个树节点类(泛型类),为了方便使用集合的排序方法,泛型类要实现泛型接口Comparable,代码如下 package com.hjp.huffman; /** * Created by J ...

  7. 仿照jquery封装一个自己的js库（一）

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  8. 使用github和hexo搭建博客

    title: How to build your blog by Hexo in github Welcome to huihuang's blog,you will find what you ex ...

  9. ConterReplaceBehavior.class.php模板内容替换，如__PUBLIC__

    ConterReplaceBehavior.class.php查找 __PUBLIC__ protected function templateContentReplace($content) { / ...

  10. MyEclipse for linux 破解方法

    1.安装MyEclipse: uu@pc:~/desktop$ chmod +x myeclipse-pro-2014-GA-offline-installer-linux.run uu@pc:~/d ...