CSS位置伪类选择器

SunnyDai2016

于 2019-08-25 23:09:19 发布

阅读量234

点赞数

分类专栏： css 文章标签：位置伪类选择器 :first-child :last-child :nth-child :nth-last-child

本文链接：https://blog.youkuaiyun.com/SunnyDai2016/article/details/100069132

版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文通过实例演示了如何使用CSS结构伪类选择器，如:first-child, :last-child, :nth-child, :nth-last-child等，来精确地选择并修改HTML列表中特定项的样式，包括基于位置、奇偶性和数学表达式的复杂选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的列表：

	<ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>

利用结构伪类选择器修改列表样式

1、

	<style>
        /* 第一个li标签 字体为蓝色 */
        li:first-child {
            color: blue;
        }

        /* 最后一个li标签 字体为红色 */
        li:last-child {
            color: red;
        }

        /* 第三个li标签 字体为绿色 */
        li:nth-child(3) {
            color: green;
        }
    </style>

运行结果：

2、

	<style>
        /* 第 奇数 个li标签 字体为红色 */
        li:nth-child(odd) {
            color: red;
        }

        /* 第 偶数 个li标签 字体为绿色 */
        li:nth-child(even) {
            color: green;
        }
    </style>

运行结果：
:nth-child
3、

	<style>
        /* 运算式 */
        /* 3的倍数 个li标签 字体为红色 */
        li:nth-child(3n) {
            color: red;
        }
    </style>

运行结果：
:nth-child(3n)
4、

	<style>
        /* :nth-last-child 表示倒序 */
        /* 倒序 第 偶数 个li标签 字体为红色 */
        li:nth-last-child(even) {
            color: red;
        }

        /* 倒序 第 奇数 个li标签 字体为绿色 */
        li:nth-last-child(odd) {
            color: green;
        }
    </style>

运行结果：
:nth-last-child