【CSS】CSS 复合选择器 ① ( 基础选择器与复合选择器 | 后代选择器 )

韩曙亮

发布于 2023-03-30 19:18:41

1.9K0

发布于 2023-03-30 19:18:41

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、基础选择器与复合选择器

CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS 的基础选择器 ;

标签选择器
类选择器
ID 选择器
通配符选择器

在实际开发中 , 基础选择器不能满足快速选择标签的需求 ;

复合选择器 是由两个以上的基础选择器通过各种方式组合而成的选择器 ;

复合选择器可以更精准更快速地选择目标元素标签 ;

二、后代选择器

1、语法说明

后代选择器可用于选择基础选择器选择出的元素组中的另外基础选择器选择出的元素组 ;

后代选择器语法 : 父选择器和子选择器都是 CSS 基础选择器 , 父选择器和子选择器之间使用空格分开 ;

父选择器 子选择器 {
	属性名称1:属性值1;
	属性名称2:属性值2;
	属性名称3:属性值3;
}

2、示例分析

下面的代码中 , 选择 div 下的 label 标签 , 就可以使用后代选择器 ;

		<div class="father">
			<label>内部文本</label>
			<label>内部文本</label>
			<label>内部文本</label>
		</div>

父选择器设置为类选择器 .father , 子选择器设置为标签选择器 label , 那么将 label 标签内的文本设置为蓝色 , 则可以使用如下样式 :

<style>
	.father label {
		color: blue;
	}
</style>

下面的代码中 , 选择 div 下的 div 下的 label 标签 , 就可以使用后代选择器 ;

<div class="gradefather">
	<div class="father2">
		<label>最内部文本</label>
		<label>最内部文本</label>
		<label>最内部文本</label>
	</div>
</div>

父选择器设置为类选择器 .gradefather , 子选择器也设置为类选择器 .father2 , 孙子选择器设置为标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式 :

<style>
	.gradefather .father2 label {
		color: red;
	}
</style>

3、完整代码示例

完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>Google</title>
		<base target="_blank"/>
        <style>
			.father label {
				color: blue;
			}
			.gradefather .father2 label {
				color: red;
			}
        </style>
    </head>
    <body>
		<label>外部文本</label>
		<label>外部文本</label>
		<label>外部文本</label>
		
		<div class="father">
			<label>内部文本</label>
			<label>内部文本</label>
			<label>内部文本</label>
		</div>
		
		<div class="gradefather">
			<div class="father2">
				<label>最内部文本</label>
				<label>最内部文本</label>
				<label>最内部文本</label>
			</div>
		</div>
    </body>
</html>

显示效果 :