CSS相邻兄弟选择器
相邻兄弟选择器定义：选择紧接在另一个元素后的元素，而且两者有着相同的父元素。
代码一：
<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相邻兄弟选择器的更多相关文章
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...
- CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使 ...
- css 通用兄弟选择器( ~ )
stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...
随机推荐
- js JS 浮点计算BUG
Number.prototype.toRound = function(d) { var s=this+"";if(!d)d=0; if(s.indexOf(".&quo ...
- Java数据库——JDBC 2.0操作
可滚动的结果集 让结果集滚动起来 //================================================= // File Name : JDBC20_demo //-- ...
- C#----对时间结构DateTime的使用(时间日期的使用)
1.其初始化时间是0001--0--0 0:0:0 class Program { DateTime dt; static void Main(string[] args) { Program pp ...
- Python 系列：1 - Tuples and Sequences
5.3 Tuples and Sequences We saw that lists and strings have many common properties, e.g., indexing a ...
- Robot Framework--04 工作区
转自:http://blog.csdn.net/tulituqi/article/details/7592711 一:Edit 接着前面的来,重新打开我们的RIDE,你会发现之前最后加的Resourc ...
- System.BadImageFormatException : 未能加载文件或程序集“Medici.PaymentRecover, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项。试图加载格式不正确的程序。
System.BadImageFormatException : 未能加载文件或程序集“xxxxx.xxxxx, Version=1.0.0.0, Culture=neutral, PublicKey ...
- xheditor编辑器的使用
xheditor编辑器的使用 一个博客.cms网站都一定会用到一个html编辑器,刚好xmfdsh在做网站时候需要用到这类编辑器,在对比了之后,发现其实差不了多少,刚好一个不错的friend在用xhe ...
- WAMPSERVER 64位 win7下 php 5.5.12通过 PECL 安装 zip扩展
通过phpinfo()查看 php5.5.12默认集成了zip模块 不过版本是1.11.0 http://pecl.php.net/package/zip 通过PECL 查看 最新版本是1.12.4 ...
- zabbix安装全过程
在了解<zabbix硬件.软件需求>之后,在你心里应该有备选的机器.今天开始安装zabbix.zabbix需要LNMP或者LAMP环境.环境的搭建不在本章范围内. LNMP环境配置Linu ...
- MySQL主从数据库同步延迟问题解决（转）
最近在做MySQL主从数据库同步测试,发现了一些问题,其中主从同步延迟问题是其中之一,下面内容是从网上找到的一些讲解,记录下来以便自己学习: MySQL的主从同步是一个很成熟的架构,优点为:①在从服务 ...