CSS层级选择器
<!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 (只能选中⼀个)*/
css选择器分为哪几类/*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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。