层次选择器

最新推荐文章于 2024-10-05 19:19:05 发布

wwaitings

最新推荐文章于 2024-10-05 19:19:05 发布

阅读量110

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/m0_48219937/article/details/119479995

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文主要介绍了CSS选择器中的层次选择器，包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器，详细解析了它们的作用和用法。

摘要由CSDN通过智能技术生成

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

1、标签选择器:选择一类标签标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
  <style>
    /*标签选择器  弊端是会选择到页面上所有的这个标签的元素*/
    h1{
      color: green;
      background: antiquewhite;
      border-radius: 24px;
    }
    p{
      color: aquamarine;
      font-size: 80px;
    }
  </style>
</head>
<body>

<h1>JAVA</h1>
<h1>Python</h1>
<p>狂神</p>

</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

  <style>
    /*类选择器的格式   .class的名称{}
    好处：可以多个标签归类，是同一个class的，可以复用
    */
    .c1{
      color: aquamarine;
    }
    .c2{
      color: #b1bb20;
    }
    .c3{
      color: #1ed427;
    }
  </style>
</head>
<body>

<h1 class="c1">标题一</h1>
<h1 class="c1">标题一</h1>
<h1 class="c2">标题一</h1>
<h1 class="c3">标题一</h1>

<p class="c3">文本</p>

</body>
</html>

效果图：
在这里插入图片描述

3、Id选择器:全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Id选择器</title>
  
  <style>
    /*id选择器：id必须保证全局唯一，不能设相同的id
    格式：#id名称{}
    优先级：id选择器>class选择器>标签选择器
    */
    #qingjiang{
      color: #b1bb20;
    }
    #kuangshen{
      color: aquamarine;
    }
  </style>
</head>
<body>


<h1 id="qingjiang">标题</h1>
<h1 id="kuangshen">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
</body>
</html>

2.2 层次选择器

在这里插入图片描述

1、后代选择器
在某个元素的后面祖爷爷爷爷爸爸你

 <style>
    /* 后代选择器*/
    body p{
      color: #1ed427;
    }
  </style>

在这里插入图片描述

2、子选择器只能选择一代儿子

body>p{
      color: aqua;
    }

在这里插入图片描述
3、相邻兄弟选择器同辈只有一个向下的一个

/*兄弟选择器*/
    .active+p{
      color: red;
    }

在这里插入图片描述

<style>
    /* 后代选择器*/
    /*body p{*/
    /*  color: #1ed427;*/
    /*}*/
    /*子选择器*/
    /*body>p{*/
    /*  color: aqua;*/
    /*}*/
    /*兄弟选择器*/
    .active+p{
      color: red;
    }
  </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>

<p class="active">p7</p>
<p>p8</p>

在这里插入图片描述
4、通用兄弟选择器当前选中元素向下的所有兄弟元素

/*  通用选择器*/
    .active~p{
      color: blueviolet;
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /* 后代选择器*/
    /*body p{*/
    /*  color: #1ed427;*/
    /*}*/
    /*子选择器*/
    /*body>p{*/
    /*  color: aqua;*/
    /*}*/
    /*兄弟选择器*/
    /*.active+p{*/
    /*  color: red;*/
    /*}*/
  /*  通用选择器*/
    .active~p{
      color: blueviolet;
    }
  </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>

<p class="active">p7</p>
<p>p8</p>

</body>
</html>