今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。

　　后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。

　　先来代码说话：

　　（1）、‘~’选择器

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.h3 ~ p{

			color: red;

		}

	</style>

</head>

<body>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<h3 class="h3">这是标题标签</h3>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<h3>这是标题标签</h3>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

</body>

</html>

　　效果如下：

　　　　　　　　

　　（2）、‘+’选择器

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		.h3 + p{

			color: red;

		}

	</style>

</head>

<body>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<h3 class="h3">这是标题标签</h3>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<h3>这是标题标签</h3>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

	<p>这是段落标签</p>

</body>

</html>

　　代码还是那些，只是把‘~’换成了‘+’，结果是大不相同。

　　　　　　

　　　　通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

CSS选择器之兄弟选择器（~和+）的更多相关文章

  1. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  2. CSS选择器之基本选择器+属性选择器

    1.1      id选择器 #main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器,用于选择HTML页面中id = "m ...

  3. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  4. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  5. CSS选择器之基本选择器

    一.通用选择器 选择器 * 匹配 所有元素 最低支持CSS版本 2 二.类型选择器 选择器 <元素类型> 匹配 所有指定类型的元素 最低支持CSS版本 1 三.类选择器 选择器 <类 ...

  6. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  7. css笔记08：id选择器之父子选择器

    1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. DOM选择器之元素选择器

    DOM中元素选择器 在DOM中我们可以将元素选择器分为两类:1.元素节点选择器:2.其它节点选择器.通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作. 一.元素节点选择器 1. ...

  9. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

随机推荐

  1. Ajax复习

    1.标准请求响应时浏览器的动作(同步操作) 1.1 浏览器请求什么资源,跟随显示什么资源 2.ajax:异步请求: 2.1 局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容 ...

  2. mysql 5.7 修改密码

    mysql 5.7 ,user表就没有password 这个字段了. ') where user='root' and host='localhost'; 这样当然就改不了密码了. ') where ...

  3. base64编码理解

    原文地址:http://www.ruanyifeng.com/blog/2008/06/base64.html 所谓Base64,就是说选出64个字符----小写字母a-z.大写字母A-Z.数字0-9 ...

  4. poj 1068 Parencodings 模拟题

    Description Let S = s1 s2...s2n be a well-formed string of parentheses. S can be encoded in two diff ...

  5. python psutil简单示例

    python psutil简单示例 利用psutil编写简单的检测小脚本 0.安装psutil模块                                                    ...

  6. 工作中的小tips（持续更新）

    1.在工作的时候一定要留下痕迹,这样即使乙方抵赖,或者说领导认为你没干活的时候留下证据(电话没有微信,邮件之类的文字类有效果) 2.每天晚上下班之前将一天的工作总结一下,把第二天的工作给罗列出来,以方 ...

  7. 1109 Group Photo

    Formation is very important when taking a group photo. Given the rules of forming K rows with N peop ...

  8. C#-vs2012学习笔记-惊奇于vs的强大和便利

    网站常用功能自动完成,包括网页和数据库.

  9. 二分搜素——（lower_bound and upper_bound)

    因为每个人二分的风格不同,所以在学习二分的时候总是被他们的风格搞晕.有的人二分风格是左闭右开也就是[L,R),有的人是左开右闭的(L,R]. 二分的最基本条件是,二分的序列需要有单调性. 下面介绍的时 ...

  10. SPFA_queue_链式前向星最短路 & HDU2433

    题目大意:看完之后,觉得不肯能让我暴力,比较好想的就是初始化——每个点都求个最短路spfa,sum数组记录每个点到各个点的最短路之和,ans作为总和,之后一一删除边u-v,求关于u的最短路,如果dis ...