CSS层次选择器，结构伪类选择器

最新推荐文章于 2024-07-12 20:49:16 发布

十三三三三i

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量72

点赞数

文章标签： css 定位 css3

本文链接：https://blog.csdn.net/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>

在这里插入图片描述

十三三三三i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层次选择器，结构伪类选择器

层次选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ body p{ background: chartreuse; } /*子选择器*/
复制链接

扫一扫