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

　　

代码一：
<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. K米交流会现场图

  2. 签名有元程序集 Signed Friend Assemblies

    下面的例子演示了创建签名程序集和有元程序集.这就要求两个程序集都是强命名,在下面的例子中,两个程序集都用了同一个秘钥,也可以用不同的秘钥. 1. 生成秘钥, 这个在前面的博客中有说明,生成秘钥文件sn ...

  3. 创建一个应用台程序，声明一个 int变量，并且初始化数组，通过while语句输出数组内的所有成员。

    ]{,,,,}; ; ) { Console.WriteLine("myNum[{0}]的值为{1}", s,myNum[s]); s++; } Console.ReadLine( ...

  4. select例子

    好长时间没有写了,其实一直在坚持学习. #include <sys/types.h> #include <sys/socket.h> #include <stdio.h& ...

  5. SOCKADDR_IN

    在windows/linux下有下面结构: sockaddr结构 struct sockaddr { unsigned short sa_family;/*addressfamily,AF_xxx*/ ...

  6. re正则表达式5_*

    *表示匹配[0,正无穷大]次 * means math zero or more-----occur any number of times in the text. # -*- coding: ut ...

  7. linux手动或者自动启动oracle11g的服务 Oracle 自动启动脚本

    手动启动: [oracle@localhost ~]$ sqlplus SQL*Plus: Release 11.2.0.1.0 Production on Wed Mar 26 23:39:52 2 ...

  8. 通过KUDU获取Azure网站的日志

    部署到Azure上的website,由于无法通过RDP的方式去登录查看log,所以我们只能通过FTP的方式或者kudu的方式进行查看,具体如下: 1.使用FTP账户和密码登录网站的KUDU界面: 如您 ...

  9. PasswordHasher

    namespace Microsoft.AspNet.Identity { public class PasswordHasher : IPasswordHasher { public virtual ...

  10. php二维数组排序的处理

    一维数组排序可以使用asort.ksort等一些方法进程排序,相对来说比较简单.二维数组的排序怎么实现呢?使用array_multisort和usort可以实现 例如像下面的数组:    代码如下: ...