CSSCSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSSCSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )相关的知识，希望对你有一定的参考价值。
文章目录
一、子元素选择器
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>
执行结果 :
以上是关于CSSCSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )的主要内容，如果未能解决你的问题，请参考以下文章
CSSCSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )
CSSCSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
CSSCSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )