CSS3新特性-结构伪类选择器nth-child（n）

最新推荐文章于 2024-03-09 00:46:14 发布

小艾同学喔

最新推荐文章于 2024-03-09 00:46:14 发布

阅读量494

点赞数 1

分类专栏：分享前端知识文章标签： html css css3 html5

本文链接：https://blog.csdn.net/al654123/article/details/104560803

版权

一、nth-child（n）

选择某个父元素的一个或多个特定的子元素

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 50px auto;
            width: 1000px;
        }

        li {
            float: left;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 20px;
            list-style: none;
            border: 1px solid black;
            color: white;
            font-weight: 700;
        }

        /*------------------------------------*/
        /* 1.需求：选择所有的偶数li */
        /* li:nth-child(even)效果相同 */
        ul li:nth-child(2n) {
            background-color: pink;
        }

        /* 2.需求：选择所有的奇数li */
        /*li:nth-child(odd)效果相同 */
        ul li:

最低0.47元/天解锁文章

小艾同学喔

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性-结构伪类选择器nth-child（n）

一、nth-child（n）选择某个父元素的一个或多个特定的子元素n 可以是数字，关键字和公式n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…n 可以是关键字：even 偶数，odd 奇数n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )<!DOCTYPE html><html la...
复制链接

扫一扫