HTML中四种关系选择器

最新推荐文章于 2024-05-04 23:09:29 发布

小白小菜鸟

最新推荐文章于 2024-05-04 23:09:29 发布

阅读量662

点赞数 1

分类专栏： html 文章标签：服务器前端 html

本文链接：https://blog.csdn.net/qq_59080175/article/details/125416092

版权

html 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

接下来谈谈各个关系之间的作用吧

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

 .sup > span{
        color: red;
      }

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

p1  .p2 {
        color: blue;
      }

3、选择下一个兄弟选择器

作用：通过指定的元素找到下一个兄弟元素

语法：兄+弟{}

  .p1 + .p2 {
        color: blue;
      }

4.选择下面所有的兄弟(前面的不选)

语法：兄～弟{}

 .p1 ~ p{
        font-size: 40px;
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求一 -->
    <style>
      .sup > span{
        color: red;
      }
      /* 需求二 */
     .sup .s2{
        background-color: green;
      }
      /* 需求三 */
      .s2 + span{
        font-size: 30px;
      }
      /* 需求四 */
      .s2~ span{
        color: orange;
      }
      /* 需求五 */
      p::first-letter{
          color: red;
        }
    </style>
  </head>
  <body> 
    <div class="sup">
      超市
      <p>
        日用品区
        <span>牙膏</span>
        <span class="s2">洗发水</span>
        <span>纸巾 </span>
        <span>沐浴露</span>
        <span>护发素</span>
      </p>
      <p>生鲜区</p>
      <span class="s1">衣服</span>
    </div>
    <p>
      dolor, sit amet consectetur adipisicing elit. Laboriosam enim recusandae cumque ad totam aspernatur magni aut iste placeat odio? Vel error ut natus voluptas blanditiis, iusto optio repellendus
      sint.
    </p>
  </body>
</html>