社区首页 >专栏 >【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

韩曙亮

发布于 2023-03-30 11:19:11

5K00

代码可运行

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

运行总次数：0

代码可运行

文章目录

一、子元素选择器

1、语法说明

子元素选择器可以选择某个基础选择器选择出的元素组的直接子元素 ( 亲儿子元素 ) 中使用基础选择器选择元素 ;

子元素选择器语法 : 父选择器写在前面 , 子选择器写在后面 , 两个选择器之间使用 > 大于号隔开 ;

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

注意 : 子选择器只能从父选择器选择出的标签的亲儿子元素中选择元素 ;

子选择器只能从父选择器选择出的元素的亲儿子元素中选择 , 孙子元素和重孙子元素选择不到 ;

CSS 基础选择器 :

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

2、代码分析

在下面的代码中 ,

div > label {
	color: blue;
}

父选择器是 div , 这是标签选择器 , 选择出了 div 标签 , 在 div 标签的字标签中 , 选择 label 标签 ,

下面的标签中 , div 标签的子标签是 label 标签 , 因此将该 label 标签选择出来 , 设置为蓝色 ;

		<div>
			<label>div 子元素</label>
		</div>

下面的标签中 , div 标签的字标签是 p 标签 , 没有 label 标签 , 因此没有可选择的元素 , 孙子标签不在子元素选择器范围之内 ;

<div>
	<p>
		<label>div 孙子元素</label>
	</p>
</div>

3、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>Google</title>
		<base target="_blank"/>
        <style>
			/* 只能选 div 下的子元素的 label 标签, 不能选孙子标签 */
			div > label {
				color: blue;
			}
        </style>
    </head>
    <body>
		<div>
			<label>div 子元素</label>
		</div>
		<div>
			<p>
				<label>div 孙子元素</label>
			</p>
		</div>
    </body>
</html>

执行结果 :

二、交集选择器

1、语法说明

交集选择器由两个基础选择器组成 , 目的是选择出同时满足两个基础选择器要求的标签 ;

交集选择器语法 : 两个基础选择器之间没有空格 ;

基础选择器1基础选择器2 {
	属性名称1:属性值1;
	属性名称2:属性值2;
	属性名称3:属性值3;
}

CSS 基础选择器 :

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

2、代码示例

下面是交集选择器 , 获取 p标签选择器与 .red类选择器交集元素标签 ;

		/*交集选择器 p标签选择器 与 .red类选择器 交集元素*/
		p.red {
			color: red;
		}

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>Google</title>
	<base target="_blank"/>
    <style>
		/*交集选择器 p标签选择器 与 .red类选择器 交集元素*/
		p.red {
			color: red;
		}
    </style>
</head>
<body>
	<p class="red">红色</p>
	<p class="red">红色</p>
	
	<div class="red">红色</div>
	<div class="red">红色</div>
</body>
</html>