HTML结构伪类选择器

最新推荐文章于 2024-07-16 21:31:13 发布

小艺航

最新推荐文章于 2024-07-16 21:31:13 发布

阅读量524

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46620826/article/details/111815168

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

事例

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪列标签</title>
    <style type="text/css">
        ul li:first-child{ background: red;}
        ul li:last-child{ background: green;}
        p:nth-child(1){ background: yellow;}
        p:nth-of-type(2){ background: blue;}
    </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>