CSS 结构伪类选择器案例

最新推荐文章于 2024-07-09 15:59:19 发布

全栈小李

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量364

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45162683/article/details/112913435

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

结构伪类选择器

  /*ul 的 第一个元素*/
    ul li :first-child{
        background: black;

    }

/*ul的最后一个元素*/
     ul li:last-child{
         background: red;
     }
/*  选中 p1  :定位到父级元素 选择当前的第一个元素
  选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 顺序
*/
    p:nth-child(1){
        background: aqua;
    }

/*  选中父元素,下的p元素的第二个,类型*/
    p:nth-of-type(2){
        background: yellow;
    }

完整案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
</head>
<style>
    /*ul 的 第一个元素*/
    ul li :first-child{
        background: black;

    }

/*ul的最后一个元素*/
     ul li:last-child{
         background: red;
     }

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

/*  选中父元素,下的p元素的第二个,类型*/
    p:nth-of-type(2){
        background: yellow;
    }

</style>

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>
</body>
</html>

全栈小李

关注

1
点赞
踩
2

收藏

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

结构伪类选择器 /*ul 的第一个元素*/ ul li :first-child{ background: black; }/*ul的最后一个元素*/ ul li:last-child{ background: red; }/* 选中 p1 :定位到父级元素选择当前的第一个元素选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效顺序*/ p:nth-child(1){
复制链接

扫一扫