【Html】11-高级选择器

最新推荐文章于 2022-10-02 20:49:06 发布

郑SaScha

最新推荐文章于 2022-10-02 20:49:06 发布

阅读量272

点赞数

分类专栏： Html+CSS入门学习记录

本文链接：https://blog.csdn.net/m0_53493562/article/details/117826656

版权

本文详细介绍了HTML中的高级选择器，包括结构类伪类如:nth-child()、状态类伪类如:hover和属性类伪类选择器，以及伪元素如::before和::after的使用，并展示了各种阴影效果，是提升CSS样式的实用指南。

摘要由CSDN通过智能技术生成

结构类伪类选择器：

`nth-child(n)`

选择父元素里边的第几个孩子(无关乎性别)
n --自然数:从1开始累加
特殊值:
odd :奇数
even :偶数表达式:
表达式：2n+1

    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        li{
     
            list-style: none;
            font-size: 20px;
            margin: 5px 20px 5px;
        }
        ul li:nth-child(1) {
     
            color: lightblue;
            font-weight: 700;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>豆沙</li>
            <li>菠萝</li>
            <li>绿豆</li>
            <li>红豆</li>
            <li>蓝豆</li>
            <li>爱豆</li>
            <li>豆豆</li>
            <li>莎莎</li>
        </ul>
    </div>

</body>

效果预览

在这里插入图片描述

`first-child`

选择父亲里边的第一个儿子{不管类型}

        ul li:first-child {
    
            color: lightskyblue ;
            font-weight: 700;
            font-size: 25px;
        }

效果预览

在这里插入图片描述

`last-child`

选择父亲里边的最后一个儿子{不管类型}

        ul li:last-child {
    
            color: lightskyblue ;
            font-weight: 700;
            font-size: 25px;
        }

效果预览

在这里插入图片描述

`nth-last-child(n)`

倒序选择

        ul li:nth-last-child(2) {
    
            color: lightskyblue ;
            font-weight: 700;
            font-size: 25px;
        }

效果预览

在这里插入图片描述

`nth-of-type(n)`

父元素内具有指定类型的元素的第几个
<style>
	ul li:nth-of-

最低0.47元/天解锁文章

郑SaScha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录