zoukankan      html  css  js  c++  java
  • 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>
    

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

          

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

  • 相关阅读:
    适度平衡树
    适度平衡树
    卡特兰(Catalan)数列
    卡特兰(Catalan)数列
    从二叉搜索树到平衡二叉搜索树
    java开发环境配置(windows下JDK7+tomcat7)
    Spring整合Hibernate的步骤
    C++重载加号运算符实现两个结构体的相加
    AABB包围盒、OBB包围盒、包围球的比較
    Html的空格显示
  • 原文地址:https://www.cnblogs.com/jf-67/p/8987341.html
Copyright © 2011-2022 走看看