CSS选择器之兄弟选择器（~和+）
今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。
后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。
先来代码说话：
（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选择器之兄弟选择器（~和+）的更多相关文章
- CSS选择器之基本选择器总结
一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...
- CSS选择器之基本选择器+属性选择器
1.1 id选择器 #main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器,用于选择HTML页面中id = "m ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- CSS选择器之通配符选择器和多元素选择器
1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...
- CSS选择器之基本选择器
一.通用选择器 选择器 * 匹配 所有元素 最低支持CSS版本 2 二.类型选择器 选择器 <元素类型> 匹配 所有指定类型的元素 最低支持CSS版本 1 三.类选择器 选择器 <类 ...
- CSS选择器之伪类选择器（伪元素）
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- css笔记08：id选择器之父子选择器
1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- DOM选择器之元素选择器
DOM中元素选择器 在DOM中我们可以将元素选择器分为两类:1.元素节点选择器:2.其它节点选择器.通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作. 一.元素节点选择器 1. ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
随机推荐
- Spring框架简介
1.发明者:Rod Johnson 2.轮子理论推崇者: 2.1 轮子理论:不用重复发明轮子 2.2 IT行业:直接只用写好的代码 3.Spring框架宗旨:不重新发明技术,让原有技术使用起来更加方便 ...
- mybatis 中文做参数报错
一个简单的查询,如果参数中有中文.如下: <select id="xxxx" resultType="hashmap"> select * from ...
- 2018.11.17 hdu5829Rikka with Subset（ntt）
传送门 nttnttntt基础题. 考虑计算每一个数在排名为kkk时被统计了多少次来更新答案. 这样的话,设anskans_kansk表示所有数的值乘上排名为kkk的子集数的总和. 则ansk=∑i ...
- hdu6444 2018中国大学生程序设计竞赛 - 网络选拔赛 1007 Neko's loop
Neko's loop Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total S ...
- jitter
release jitter of tasks there is a distinction between the real activation request and the actual ac ...
- 在运行bat文件时，报错发生系统错误123,文件名，目录名或卷标语法不正确
报错:发生系统错误123,文件名,目录名或卷标语法不正确 这个错误就相当于你在dos命令行中输入一个命令,报错“不是内部或外部命令,也不是可运行的程序”.此时你可以在系统环境变量中检查是否配置了这个命 ...
- MongoDB-环境搭建
1.下载并安装MongoDB服务 下载地址:mongodb-win32-x86_64-2008plus-ssl-3.2.8-signed 可直接运行mongod命令启动MongoDB服务器,也可以将M ...
- [小结]了解innodb锁
原创文章,会不定时更新,转发请标明出处:http://www.cnblogs.com/janehoo/p/5603983.html 背景介绍: innodb的锁分两类:lock和latch. 其中la ...
- oss 上传文件夹-cloud2-泽优软件
说明: 1. 修复同时上传多个文件夹崩溃的问题. 2. 修复阿里云(OSS)特殊文件名称无法上传的问题. 3. 文件夹MD5提供配置项(默认关闭).
- AIX nfs简单说明
AIX 系统 NFS设置 一.NFS守护进程:NFS是通过使用许多用户级的守护进程及远程过程调用等网络应用程序来实现的.而NFS服务器及客户端的守护进程并不完全一致. 1. 作为NFS服务器所需的守护 ...