数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何设置奇数和偶数列表项的样式？
列表是项目的集合，被认为是表示信息的一种最佳方式之一。HTML 中的列表元素有助于我们构建页面上的内容。无论是用于导航还是显示一般内容，它都是最常用的元素之一。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 ) {
// Set of CSS properties
}
使用偶数关键字值
影响具有偶数数值位置的元素（例如 2、4、6、8 等）。以下是语法：
li:nth-child( even ) {
// Set of CSS properties
}
示例
此示例的目的是演示如何使用带有 even 关键字的 :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(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>
示例
最后一个示例显示了如何使用带有 odd 和 even 关键字值的 :nth-child 伪类分别设置奇数和偶数列表项的样式。
<!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>
更新于： 2023年9月12日
366 次浏览
广告