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

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

　　先来代码说话：

　　（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. 2019.02.07 bzoj4316: 小C的独立集（仙人掌+树形dp）

    传送门 题意:给出一个仙人掌森林求其最大独立集. 思路:如果没有环可以用经典的树形dpdpdp解决. fi,0/1f_{i,0/1}fi,0/1​表示第iii个点不选/选的最大独立集. 然后fi,0+ ...

  2. 2019.01.10 bzoj1095: [ZJOI2007]Hide 捉迷藏（动态点分治）

    传送门 蒟蒻真正意义上做的第一道动态点分治! 题意:给一棵最开始所有点都是黑点的树,支持把点的颜色变成从黑/白色变成白/黑色,问当前状态树上两个最远黑点的距离. 思路: 首先考虑不带修改一次点分治怎么 ...

  3. 2019.01.09 bzoj2599: [IOI2011]Race（点分治）

    传送门 题意:给一棵树,每条边有权.求一条路径,权值和等于K,且边的数量最小. 思路: 考虑点分治如何合并. 我们利用树形dpdpdp求树的直径的方法,边dfsdfsdfs子树边统计答案即可. 代码: ...

  4. Java数组的初始化

    1.动态初始化 数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组的动态初始化 int [] arr = new int [3]; 2.静态初始化 数据类型 [] 变量名 = {元 ...

  5. ip route 解释

    [root@localhost ~]# ip route default via 172.16.0.1 dev ens192 proto static metric 100 172.16.0.0/16 ...

  6. auto和decltype（c++11）

    1.auto 1)auto是一个类型说明符(类型说明符就是像int.double这样的),用来定义一个变量,它可以让编译器去分析表达式的类型,并使用该表达式的值去初始化变量 //auto定义的变量必须 ...

  7. typecho 调用评论最多热门文章

    在当前主题的functions.php文件中添加以下函数代码: function getHotComments($limit = 10){ $db = Typecho_Db::get(); $resu ...

  8. 深入浅出javascript（四）网页运行原理

    这一篇是根据不同的书本知识归纳的内容,解答的问题是浏览器是如何工作的? 另外,还有一些长篇的内容,写的是浏览器内部如何架构的,这些内容非常复杂艰深,比现在所写的内容又低了一个层级,希望有时间能总结贴出 ...

  9. JS库汇总[重要]

    库名称  说明 附加说明 URI 一款js 操作URL的插件 功能十分强大.可以增加 .修改.删除.参数   1.Animate.css 2.Hover.css 3.jQuery 4.WebUploa ...

  10. 2018/02/25 PendingIntent使用

    https://www.cnblogs.com/liyiran/p/4656821.html http://blog.csdn.net/ydpl2007/article/details/7591642 ...