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

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

　　先来代码说话：

　　（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. HierSort(希尔)————Java

    利用Java进行希尔排序(元素中有0会有问题),步长经过调试length/2+1最合适. import java.util.Scanner; public class HierSort { priva ...

  2. Jetty 9的使用

    参考来源:https://www.cnblogs.com/empireghost/p/3522834.html

  3. oracle compile 编译无效对象

    原博主:http://blog.csdn.net/tianlesoftware/article/details/4843600 Applies to: Oracle Server - Enterpri ...

  4. iframe父子元素获取

    jquery.js调用iframe父窗口与子窗口元素的方法 1. jquery在iframe子页面获取父页面元素代码如下: $("#objid",parent.document) ...

  5. VIP之CVI CVO

        3. VIP CVI CVO   在开始时,对于CVI和CVO是不知道应该怎样去调试的,就是不知道应该从哪里去确认是对还是错. 关于这一点从再次看到关于数据包的格式才明朗的.去分析CVI和输出 ...

  6. Jquery获取选中的文本值

    $(document).ready(function() { $(".contenttext").mouseup(function(e) { var txt; var parent ...

  7. java项目显示红叉，程序却没有错误

    转 http://blog.sina.com.cn/s/blog_825b7d7c0102w7rq.html (2016-07-02 11:38:38)   分类: javaWeb 电脑换了不同版本的 ...

  8. C++类、继承、多态、虚函数

    一个比较好的虚函数例子 /****************************/ /* 作者:骆天 */ /* 时间:2018/1/26 */ /* 代码:多态的理解 */ /********** ...

  9. MIT molecular Biology 笔记8 RNA剪接

    视频  https://www.bilibili.com/video/av7973580/ 教材 Molecular biology of the gene 7th edition  J.D. Wat ...

  10. 02：OC和C对比

    1.源文件对比 C语言中常见源文件.h头文件,.c文件 文件扩展名 源类型 .h 头文件,用于存放函数声明 .c C语言源文件,用于实现头文件中声明的方法 OC中的源文件.h头文件,.m与.mm的实现 ...