CSS层级选择器

最新推荐文章于 2024-06-05 16:49:46 发布

Stirve unremitting

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量187

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104967198

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			/*选中后代,不论是子集还是还是又包含里面的子集,都选中box 下的  所有 a 都会被选中*/
			/*.box a{
				color:red;
				font-size:30px;
			}*/
			
			/*选中儿子,其他的嵌套子集不会被选中*/
			/*.box>a{
				color:red;
				font-size:30px;
			}*/
			/*直选中紧跟在p后的第一个a (只能选中一个)*/
			/*p + a{
				color:red;
				font-size:30px;
			}*/
			
			/*选中p标签后的所有 a (可以选中多个)*/
			p ~ a{
				color:red;
				font-size:30px;
			}*/
			}
		</style>
	</head>
	<body>
		<!--
			父级  > 子集         兄 + 弟
        	.box>p+a
        -->
        <div class="box">
        	<a href="">哈哈哈哈</a>
        	<a href="">哈哈哈哈</a>
        	<p>
        		<a href="">哈哈哈哈</a>
        	</p>
        	<a href="">呵呵呵呵呵1</a>
        	<a href="">呵呵呵呵呵2</a>
        	<a href="">呵呵呵呵呵3</a>
        	<a href="">呵呵呵呵呵4</a>
        </div>
		
	</body>
</html>