css中“~“、“＞“、“.“、“空格“、“&“含义(附demo及效果图)

suhg

已于 2022-02-24 17:23:48 修改

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css 前端

于 2022-02-24 17:06:45 首次发布

本文链接：https://blog.csdn.net/weixin_38882971/article/details/123041681

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：

.a >.b 子代选择器 只选取一代
.a .b 所有子代
.a.b 串联选择器
.a + .b 相邻选择器
.a ~.b 平级选择两者父级需一致

参考demo


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  	.child1 {
		color: green;
    }
	.root >.child1 {
		color: red;
    }
	.child11 ~.child12{
		color: #000079;
	}

	.child11 ~.child12{
		color: #000079;
	}

	.child21 +.child22{
		color: #FF0000;
	}

	.child21 +.child22{
		color: #FF0000;
	}
	.root3 .child31 {
	   color: #d71345;
	}

	.child31.common {
	  color: black;
	}
  </style>
 </head>
 <body>
  <div class="root">
        <h1 >演示 > </h1 >
	   <div class="child1">阿里(>只有我是红色的)</div>
	   <div class="child2">腾讯</div>
	   <div class="child3">
	   	   <div class="child1">阿里(我没改变)</div>
	       <div class="child2">腾讯</div>
		</div>
  </div>
	<div class="root1">
	    <h1 >演示 ~ </h1 >
	   <div class="child11">阿里</div>
	   <div class="child12">腾讯(我会改变)</div>
	   <div class="child12">百度(我会改变)</div>
	   <div class="child14">
	   	   <div class="child12">腾讯(我不会改变，我们不是一个父亲)</div>
	       <div class="child12">百度(我不会改变，我们不是一个父亲)</div>
		</div>
	</div>
	<div class="root2">
	   <h1 >演示 + </h1 >
	   <div class="child22">大哥，不会受二弟影响</div>
	   <div class="child21">二哥</div>
	   <div class="child22">三弟，在二哥之后会影响</div>
	</div>
	<div class="root3">
	   <h1 >演示 .a .b </h1 >
	   <div class="child31">大哥</div>
	   <div class="child31">二哥</div>
	   <div class="child31">三弟</div>
	</div>
	<div class="root3 ">
	   <h1 >演示 .a.b </h1 >
	   <div class="child31 common">大哥继承</div>
	   <div class="child31 common">二哥继承</div>
	   <div class="child31">三弟没有我</div>
	</div>
 </body>
</html>