CSS层次选择器，结构伪类选择器_结构伪类选择器层级-优快云博客

本文链接：https://blog.youkuaiyun.com/hu20210623/article/details/119415770

层次选择器

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

    <style>

        /*后代选择器*/
        body p{
            background: chartreuse;
        }

        /*子选择器*/
        body>p{
            background: fuchsia;
        }

        /*相邻兄弟选择器：只有一个，相邻（向下变）*/
        .test + p{
            background: aqua;
        }

        /*通用兄弟选择器，当前选中元素的向下所有兄弟元素*/
        .test~p{
            background: coral;
        }

    </style>

</head>
<body>
<p>p0</p>
<P class="test">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="test">P7</P>
<p>p8</p>

</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--避免使用，class，id选择器-->
  <style>
      /*ul的第一个子元素*/
    ul li:first-child{
      background: coral;
    }
      /*ul的最后一个子元素*/
    ul li:last-child{
      background: fuchsia;
    }

    /* 选中p1 :定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
    */
      p:nth-child(1){
          background: crimson;
      }

      /*选中父元素，下的p元素的第二个*/
      p:nth-of-type(2){
          background: cornflowerblue;
      }
  </style>


</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>

<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>

在这里插入图片描述