CSSj结构伪类选选择器

最新推荐文章于 2024-07-24 11:13:53 发布

@睡不醒的每天@

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量233

点赞数 1

分类专栏：前端html 文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_67929156/article/details/125138983

版权

前端html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

伪类结构选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        /*
        定位第一个元素
         */
     ul li:first-child{

         background: blue;
     }
   /*
   定位最后一个元素
    */
   ul  li:last-child{

    background: #61ff44;
}
  /*
  根据元素定位；顺序结构
 */
        p:nth-child(1){

            background: #ff1124;
        }
        /*
        根据元素类型定位：
        p类型的第二个元素
         */
        p:nth-of-type(2){
            background: #da8fff;
        }

    </STYLE>
</head>
<body>
<P>1</P>
<P>2</P>

<P ID="A">3</P>

<UL CLASS="B">

    <LI >1</LI>
    <LI>2</LI>
    <LI>3</LI>
</UL>
</body>
</html>

定位父标签下的第一个标签

 ul li:first-child{

         background: blue;
     }

定位父标签下最后一个标签

ul  li:last-child{

    background: #61ff44;
}

定位p标签下的第一个标签（根据标签定位）

p:nth-child(1){

            background: #ff1124;
        }

定位类型为p标签下的第二个标签（根据标签类型定位）

p:nth-of-type(2){
            background: #da8fff;
        }

在这里插入图片描述
文章推荐: css高级层次选择器详解

文章推荐: css基本选择器大全

@睡不醒的每天@

关注

1
点赞
踩
1

收藏

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

代码：定位父标签下的第一个标签定位父标签下最后一个标签定位p标签下的第一个标签（根据标签定位）定位类型为p标签下的第二个标签（根据标签类型定位）文章推荐: css高级层次选择器详解文章推荐: css基本选择器大全...
复制链接

扫一扫

专栏目录