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>

  代码还是那些,只是把‘~’换成了‘+’,结果是大不相同。

      

 

    通过这两个例子,可以发现虽然这两个选择器都表示兄弟选择器,但是‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的。而‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。

 

posted @ 2018-05-03 20:33  江峰★  阅读(42838)  评论(0编辑  收藏