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

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

　　先来代码说话：

　　（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. fabric 安装

    fabric 是一个python的库,fabric可以通过ssh批量管理服务器. 第一步安装依赖包 安装fabric依赖及pip yum install -y python-pip gcc pytho ...

  2. 859. Buddy Strings

    class Solution { public: bool buddyStrings(string A, string B) { int lenA=A.length(); int lenB=B.len ...

  3. 2018.12.31 NOIP训练 czy的后宫6（线性dp）

    传送门 题意简述:给一个nnn个数的数列,你可以把它最多分成mmm段,求每段数之和的最大值的最小值,以及满足这个最小值的时候划分数列的方案数. 思路:第一个问题是二分经典问题,不妨设其答案为limli ...

  4. javascript捕获页面窗口关闭事件

    javascript捕获窗口关闭事件有两种方法 onbeforeunload()      ,onUnload() 用法有两种: 1.    function      window.onbefore ...

  5. 剑指offer42：不用加减乘除做加法

    分析: (1)十进制加法分三步:(以5+17=22为例) 1. 只做各位相加不进位,此时相加结果为12(个位数5和7相加不进位是2,十位数0和1相加结果是1): 2. 做进位,5+7中有进位,进位的值 ...

  6. js判断 pc 手机 浏览器

    <script> var result = window.matchMedia('(max-width: 700px)'); var browser={ versions:function ...

  7. 2018-03-10 VCard备份恢复联系人

    主要在VCardComposer类中备份联系人的逻辑 导出流程: http://blog.csdn.net/michael_yt/article/details/78270537 导入流程: http ...

  8. Java应用分类

    Java应用分类     一.应用程序.指在操作系统上直接运行的,不是浏览器,Java环境用本机的,需要在客户端安装,Java环境可以一起安装.         1.GUI图形界面应用程序       ...

  9. How to fix "FAILURE DURING CONVERSION TO COFF: FILE INVALID OR CORRUPT"

    Error LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt appear ...

  10. Properties类、序列化流与反序列化流、打印流、commons-IO

    Properties类 特点: 1.Hashtable的子类,map集合中的方法都可以用: 2.该集合没有泛型,键值都是字符串: 3.是一个可以持久化的属性集,键值可以存到集合中,也可存到持久化的设备 ...