【03】css关系选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/hejuan___/article/details/144794666

css关系选择器

关系选择器：后代选择器，子代选择器>，相邻兄弟选择器+，通用兄弟选择器~

一、后代选择器

E F{}【孙子F、重孙子F、重重孙子F（所有的孙子）】
【选择E元素包含的所有F元素，用空格分隔】

<运行结果>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 后代选择器E F{} */
      /* div是最大的,后面的p都是它的后代 */
      div p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>01</p>
      <ul>
        <li><p>02</p></li>
        <li><p>03</p></li>
      </ul>
    </div>
  </body>
</html>

二、子代选择器

E>F{}【孙子F（只有一个）】
【选择E元素的直接F元素（对更深一层的元素不起作用），用‘>’分隔】

<运行结果>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 子代选择器E>F{} */
      div > p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>01</p>
      <ul>
        <li><p>02</p></li>
        <li><p>03</p></li>
      </ul>
    </div>
  </body>
</html>

三、相邻兄弟选择器

E+F{}【相邻并且是兄弟(只有一个兄弟)】
【选择紧跟E元素后的第一个F元素(向下选择)，用’+'分隔】

<运行结果>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 相邻兄弟选择器E+F{} */
      div + p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>01</div>
    <p>02</p>
    <p>02</p>
  </body>
</html>

四、通用兄弟选择器

E~F{}【（下面所有的F）】
【选择E元素之后的所有兄弟元素F，用’~'分隔】

<运行结果>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 通用选择器E~F{} */
      div ~ p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>01</div>
    <p>02</p>
    <p>02</p>
  </body>
</html>