【34】CSS3（1）—— 新增选择器①子级选择器

倏存

已于 2022-07-12 21:39:37 修改

阅读量745

点赞数 3

分类专栏：前端基础文章标签： css css3 原力计划

于 2021-04-08 09:56:07 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115485345

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

CSS3 中，相对于 CSS2.1 版本的 7 个选择器（具体见以前文章）：
【15】CSS基础（2）——选择器①基础选择器
 【16】CSS基础（2）——选择器②高级选择器
 【17】CSS基础（2）——选择器③选择器权重
CSS3 增加了更多其他的选择器，实现了更多的选择方式。

CSS3 新增选择器：
• 子级选择器 • 兄弟选择器 • 结构伪类选择器 • 伪元素选择器 • 属性选择器
本篇讲解：子级选择器
在这里插入图片描述

一、子级选择器

1.介绍

子级选择器	具体含义
用于	选取带有特定父元素的元素
书写语法	`element1 > element2`

2.注意

①如果 element2 元素不是父元素element1的直接子元素，则不会被选择。（比如下面举例中的.box > p 只选中了直接在子元素p，而没有选中.box中的.inner中的p）
② > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。

3.举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>举例：子级选择器</title>
  <style>
    .box > p {       /*选中情况见效果图*/
      background-color: pink;
    }
    .inner > p {   /*选中情况见效果图*/
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>这是 box 中的 p 标签元素</p>
    <p>这是 box 中的 p 标签元素</p>
    <div class="inner">
      <p>这是 inner 中的 p 标签元素</p>
    </div>
  </div>
  <p>这是一个单独的 p 标签元素</p>
</body>
</html>