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

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

　　先来代码说话：

　　（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. Transforming Real-Time Task Graphs to Improve Schedulability

    Basic idea:  insert artificial delays to the release times of certain vertices of a task graph to ge ...

  2. 解决Oracle+Mybatis批量插入报错：SQL 命令未正确结束

    Mybatis批量插入需要foreach元素.foreach元素有以下主要属性: (1)item:集合中每一个元素进行迭代时的别名. (2)index:指定一个名字,用于表示在迭代过程中,每次迭代到的 ...

  3. poj 2240 Arbitrage(最短路问题)

    Description Arbitrage is the use of discrepancies in currency exchange rates to transform one unit o ...

  4. Unicode和多字节的相互转换

    多字节转Unicode 四步: Step1 #include <iostream> #include "windows.h" using namespace std; ...

  5. 1.2.1继承Thread类

    实现多线程的方法有2种:方法一是继承Thread,方法二是实现Runnerable接口 使用继承Thread类的方法创建多线程的时候,最大的局限性就是不支持多继承,因为java语言的特点就是单继承,因 ...

  6. 合理提升WEB前端性能

    前端的优化包括四个部分:HTML结构优化.CSS样式优化.JS行为优化.服务器的优化.合理的前端优化不仅能够提升网站加载速度,而且能够更好的提升用户体验和团队开发效率.所以前端性能优化的重要性是不言而 ...

  7. POJ3280--Cheapest Palindrome(动态规划)

    Keeping track of all the cows can be a tricky task so Farmer John has installed a system to automate ...

  8. 11：self关键字

    本小节知识点: 类方法中的self 对象方法中的self 全局变量成员变量局部变量 self总结 self使用注意 OC提

  9. double float的精度问题

    三部曲 1: #include <iostream> #include <stdio.h> #include <string.h> using namespace ...

  10. php开发工具，zendstudio13使用方法补丁

    官网原版下载http://downloads.zend.com/studio ... win32.win32.x86.exe 破解补丁:链接:http://pan.baidu.com/s/1gdi4U ...