2020-05-16-----CSS中的选择器（2）_css用子代选择器修改字体颜色没用-CSDN博客

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/106155998

CSS中的选择器（2）

选择器（8种）

内部样式，写在style标签里。
1-5种上一篇博文 link.
6./ * 包含（后代）选择器所有后代 */
.box2 p{
color: palegreen;
}
7./ * 子代选择器只找第一代子代 */
.box1 > p{
color: paleturquoise;
}
8./ * 伪类选择器 */
/ * 在父级元素中找到第n个并且标签名为div的子标签
n>0的自增整数 * /
body div:nth-child(1){
width: 20px;
height: 20px;
background-color: brown;
}

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
	</head>
	<style type="text/css">
		.box1,.box2{
			width:200px;
			height:200px;
		}
		.box1_1,.box2_1{
			width:100px;
			height:100px;
		}
		.box1{
			background-color:tan;
		}
		.box2{
			background-color:thistle;
		}
		.box1_1{
			background-color:teal;
		}
		.box2_1{
			background-color:black;
		}
		
		/*包含（后代）选择器  所有后代*/
		/*.box1 p{
			color: palegoldenrod;
		}*/
		.box2 p{
			color: palegreen;
		}
		
		/*子代选择器 只找第一代子代*/
		.box1 > p{
			color: pink;
		}
		
		/*伪类选择器*/
		/*在父级元素中找到第n个并且标签名为div的子标签
		 n>0的自增整数*/
		body div:nth-child(1){
			width: 200px;
			height: 200px;
			background-color: plum;
		}
		
	</style>
	<body>
		<div>伪类选择器</div>
		<p></p>
		<div></div>
		
		<div class="box1">
			<p>box1</p>
			<div class="box1_1">
				<p>box1_1</p>
			</div>
		</div>
		<div class="box2">
			<p>box2</p>
			<div class="box2_1">
				<p>box2_1</p>
			</div>
		</div>
	</body>
</html>

效果展示

在这里插入图片描述

解释

1.第一个div是通过伪类选择器添加的效果。
2.第二个div中的box1 p1字体的颜色效果是通过子代选择器添加的效果，box1 >p 只选中box1的第一个子代p标签（box1 p1），第二个子代p标签（box1-1 p1-1）不选中，默认为黑色。
3.第三个div中的box2 p2和box2-1 p2-1的字体颜色效果是通过后代选择器添加的效果，box p 选中的是box2的所有后代p标签，box2 p2 和 box2-1 p2-1都被添加为荧光绿色。