后代选择器、子代选择器的嵌套使用及效果图

薇寻小桂

已于 2024-07-08 15:31:57 修改

阅读量390

点赞数 9

文章标签： html css 前端

于 2024-07-06 11:29:49 首次发布

本文链接：https://blog.csdn.net/qq_54581101/article/details/140226123

版权

教学视频来自html+css课程：55、后代、子代选择器_哔哩哔哩_bilibili

一、标签选择器：即通过标签名称进行选择

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div>
      <p>这是子标签1</p>
      <p>这是子标签2</p>
      <p>这是子标签3</p>
      <p>这是子标签4</p>
<div>
        <p>这是孙子标签1</p>
        <p>这是孙子标签2</p>
        <p>这是孙子标签3</p>
        <p>这是孙子标签4</p>
        <div>
          <p>这是重孙子标签1</p>
          <p>这是重孙子标签2</p>
          <p>这是重孙子标签3</p>
          <p>这是重孙子标签4</p>
        </div>
      </div>
    </div>
  </body>
</html>

 /* 一、标签选择器  选择某元素的后代 */
  div p {
    /* 这是一个标签选择器，选择了所有div中的p标签，并渲染 */
    color: red;
  }

选择了所有div中的p标签进行渲染，导致所有的p标签都被渲染为红色。

二、后代选择器

利用id选择器的唯一特性，只选择了第一个div，并对其中的p标签进行渲染。这里必须要写“>”符号，才能只渲染father中的子标签，否则会渲染所有father以后的p标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="father">
      <p>这是子标签1</p>
      <p>这是子标签2</p>
      <p>这是子标签3</p>
      <p>这是子标签4</p>
      <div>
        <p>这是孙子标签1</p>
        <p>这是孙子标签2</p>
        <p>这是孙子标签3</p>
        <p>这是孙子标签4</p>
        <div>
          <p>这是重孙子标签1</p>
          <p>这是重孙子标签2</p>
          <p>这是重孙子标签3</p>
          <p>这是重孙子标签4</p>
        </div>
      </div>
    </div>
  </body>
</html>

  /* 二、子代选择器  选择某元素的后代 */
  #father > p{
    /* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
    color: red;
  }

下面的代码没有写“>”符号，导致渲染了所有father下的p标签。

/* 二、子代选择器  选择某元素的后代 */
  #father  p{
    /* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
    color: red;
  }

三、后代选择器的嵌套使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="father">
      <p>这是子标签1</p>
      <p>这是子标签2</p>
      <p>这是子标签3</p>
      <p>这是子标签4</p>
      <div>
        <p>这是孙子标签1</p>
        <p>这是孙子标签2</p>
        <p>这是孙子标签3</p>
        <p>这是孙子标签4</p>
        <div>
          <p>这是重孙子标签1</p>
          <p>这是重孙子标签2</p>
          <p>这是重孙子标签3</p>
          <p>这是重孙子标签4</p>
        </div>
      </div>
    </div>
  </body>
</html>

这里先选择其中一个后代，再通过“>”选择下一个后代，对p标签进行渲染。

/* 三、后代选择器可以进行嵌套使用  选择某元素的后代的后代，通过>符号进行连接，连续使用 */
  #father > div > p{
    /* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
    color: red;
  }

四、后代代选择器和标签选择器的混合使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="father">
      <p>这是子标签1</p>
      <p>这是子标签2</p>
      <p>这是子标签3</p>
      <p>这是子标签4</p>
      <div>
        <p>这是孙子标签1</p>
        <p>这是孙子标签2</p>
        <p>这是孙子标签3</p>
        <p>这是孙子标签4</p>
        <div>
          <p>这是重孙子标签1</p>
          <p>这是重孙子标签2</p>
          <p>这是重孙子标签3</p>
          <p>这是重孙子标签4</p>
        </div>
      </div>
    </div>
  </body>
</html>

先使用后代选择器选择需要渲染的后代，再使用标签选择器渲染该后代拥有的所有p标签。

/* 四、后代代选择器和标签选择器的混合使用  先使用后代选择器对需要渲染的后代进行选择，再通过标签选择器进行选择 */
  #father > div  p{
    /* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
    color: red;
  }

薇寻小桂

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
后代选择器、子代选择器的嵌套使用及效果图

利用id选择器的唯一特性，只选择了第一个div，并对其中的p标签进行渲染。这里必须要写“>”符号，才能只渲染father中的子标签，否则会渲染所有father以后的p标签。先使用后代选择器选择需要渲染的后代，再使用标签选择器渲染该后代拥有的所有p标签。这里先选择其中一个后代，再通过“>”选择下一个后代，对p标签进行渲染。选择了所有div中的p标签进行渲染，导致所有的p标签都被渲染为红色。下面的代码没有写“>”符号，导致渲染了所有father下的p标签。
复制链接

扫一扫