如何设置偶数和奇数列表项的样式?

htmlweb developmentfront end technology更新于 2025/3/29 14:04:17

列表是一系列项的集合，被认为是呈现信息的最佳方式之一。HTML 中的 list 元素帮助我们构建页面内容。它是最常用的元素之一，无论是用于导航还是显示常规内容。HTML 允许我们以三种方式表示列表:有序列表、无序列表和描述列表。

无序列表:这种类型的列表用于表示无特定顺序的 HTML 项。<ul> 标签用于定义无序列表。
有序列表:用于表示按特定顺序排列的 HTML 列表项。<ol>标签用于定义有序列表。
描述列表: 它允许我们创建包含列表项描述的列表。列表项使用 <dt> 标签指定，而 <dd> 标签用于添加列表项的描述。它们都包含在 <dl> 标签中。

示例

让我们看一个使用 CSS 属性设置样式的简单列表示例。

<!DOCTYPE html>
<html>
<head>
    <title>List Styling in CSS</title>
    <style>
        li{
            background-color:wheat;
            width:225px;
            color:sienna;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>Famous International Travel Destinations</p>
    <ol>
        <li>Maldives</li>
        <li>Bali</li>
        <li>Singapore</li>
        <li>Dubai</li>
        <li>Thailand</li>
    </ol>
</body>
</html>

默认情况下，样式属性会应用于整个列表。如果需要分别设置奇数和偶数列表项的样式，则必须使用 CSS 中的伪类。

使用 :nth-child 伪类

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。它以冒号 (:) 开头，以伪类名称结尾。

伪类 :nth-child() 根据元素在一组兄弟元素中的索引或位置来选择元素并为其添加样式。可以使用数字、关键字或公式来指定 :nth-child()。

使用奇数关键字值

具有奇数数字位置的元素会受到影响(例如 1、3、5、7 等)。语法如下 –

li:nth-child( odd ) {
// CSS 属性集
}

使用偶数关键字值

数字位置为偶数的元素会受到影响(例如 2、4、6、8 等)。语法如下 –

li:nth-child( even ) {
// CSS 属性集
}

示例

本示例旨在演示如何使用 :nth-child 伪类和 even 关键字来设置偶数列表元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>How to Style Even and Odd List Items</title>
    <style>
        li{
            width:300px;
            padding:5px;
        }
        li:nth-child(even) {
            background-color:mistyrose;
            color:sienna;
            font-weight:bold;
            font-size:18px;
        }
        p{
            color:sienna;
            font-size:20px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>Steps to make Tea</p>
    <ol>
        <li>Heat water in a vessel.</li>
        <li>Add tea leaves, ginger, cardamom and some tea masala.</li>
        <li>Let it simmer for a while until the flavours get infused properly.</li>
        <li>Now, add milk and sugar as required.</li>
        <li>Bring it to a boil.</li>
        <li>Strain and serve.</li>
    </ol>
</body>
</html>

示例

在此示例中，我们将使用带有 odd 关键字的 :nth-child 伪类来设置奇数列表项的样式。

<!DOCTYPE html>
<html>
<head>
    <title>How to Style Even and Odd List Items</title>
    <style>
        li{
            width:300px;
            padding:5px;
        }
        li:nth-child(odd) {
            background-color:mintcream;
            color:mediumturquoise;
            font-weight:550;
            font-size:20px;
            border:1px solid teal;
        }
        p{
            color:teal;
            font-size:20px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>Steps to make Tea</p>
    <ol>
        <li>Heat water in a vessel.</li>
        <li>Add tea leaves, ginger, cardamom and some tea masala.</li>
        <li>Let it simmer for a while until the flavours get infused properly.</li>
        <li>Now, add milk and sugar as required.</li>
        <li>Bring it to a boil.</li>
        <li>Strain and serve.</li>
    </ol>
</body>
</html>

示例

最后一个例子展示了如何使用 :nth-child 伪类的 odd 和 even 关键字值分别设置奇数和偶数列表项的样式。

<!DOCTYPE html>
<html>
<head>
    <title>How to Style Even and Odd List Items</title>
    <style>
        li{
            width:320px;
            padding:5px;
        }
        li:nth-child(even) {
            background-color:mistyrose;
            color:sienna;
            font-weight:bold;
            font-size:18px;
        }
        li:nth-child(odd) {
            background-color:mintcream;
            color:mediumturquoise;
            font-weight:550;
            font-size:20px;
        }
        p{
            color:darkslategray;
            font-size:20px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p>Steps to make Tea</p>
    <ol>
        <li>Heat water in a vessel.</li>
        <li>Add tea leaves, ginger, cardamom and some tea masala.</li>
        <li>Let it simmer for a while until the flavours get infused properly.</li>
        <li>Now, add milk and sugar as required.</li>
        <li>Bring it to a boil.</li>
        <li>Strain and serve.</li>
    </ol>
</body>
</html>