极客笔记使用:even和:odd伪类与CSS中的列表项
CSS中包含各种伪类。其中之一是’:even’和’:odd’。它们用于选择交替的子元素。有时，开发人员需要使用不同的样式设计交替的元素。在这种情况下，他们可以使用特定的CSS选择器来选择偶数和奇数元素。
在本教程中，我们将学习如何在列表项中使用’:even’和’:odd’伪类。
使用’:odd’伪类与列表项
‘:odd’伪类用于选择位于奇数位置的HTML元素。我们可以使用’:odd’类与nth-child() CSS方法一起选择所有列表项的子元素。
语法
用户可以按照以下语法使用’:odd’伪类来选择所有位于奇数位置的列表项。
li:nth-child(odd) {
/* CSS code */
}
在上述语法中，我们使用了“nth-child（）”CSS方法，并传递了“odd”作为参数来选择奇数个子元素。
示例
在下面的示例中，我们创建了一个包含“red”和“green”替代文本的项目列表。我们在CSS中使用“li:nth-child (odd)”选择器来选择所有奇数个列表项。在输出中，用户可以观察到位于奇数位置的列表项的红色。
<html>
<head>
<style>
li:nth-child(odd) {
color: #ff0000;
}
</style>
</head>
<body>
<h3>Using the <i> :odd pseudo class </i> to select odd elements in the list items</h3>
<ul>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
<li> green </li>
<li> red </li>
</ul>
</body>
</html>
示例
在下面的示例中，我们创建了一个与食物相关的列表，并给它们添加了‘foods’类名。我们使用了CSS选择器 ‘.foods :nth-child(2n + 1)’ 来选择奇数项。在这里，用户可以观察到类名和nth-child()方法之间的间距。同时，我们将‘2n+1’作为参数传递，而不是使用odd，因为两者的效果相同。
在输出结果中，我们可以看到奇数元素被正确地样式化了。
<html>
<head>
<style>
.foods :nth-child(2n + 1) {
padding: 5px;
margin: 5px;
color: blue;
background-color: aqua;
border: 3px solid red;
width: 300px;
}
</style>
</head>
<body>
<h3>Using the <i> :odd pseudo class </i> to select odd elements in the list items</h3>
<ul class = "foods">
<li> Pizza </li>
<li> Burger </li>
<li> Pasta </li>
<li> Noodles </li>
<li> Sandwich </li>
<li> Hot Dog </li>
<li> French Fries </li>
<li> Ice Cream </li>
<li> Cake </li>
<li> Donuts </li>
</ul>
</body>
</html>
使用“:even”伪类与列表项
“:even”伪类用于选择位于偶数位置的元素。我们需要与nth-child()方法一起使用。
语法
用户可以按照以下语法使用“even”伪类与列表项。
li:nth-child(even) {
/* CSS code */
}
在上述语法中，用户可以在声明块中编写CSS代码，以将其应用于偶数元素。
示例
在下面的示例中，我们创建了列表项。它包含“pink”和“blue”两个交替的文本。
我们在CSS中选择了列表项，并使用了nth-child（even）方法来将特定样式应用于偶数列表项。在输出中，用户可以观察到它改变了位于偶数位置的文本的颜色。
<html>
<head>
<style>
li:nth-child(even) {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> :even pseudo class </i> to select even elements in the list items</h3>
<ul>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
<li> pink </li>
<li> blue </li>
</ul>
</body>
</html>
示例
我们在下面的示例中创建了包含汽车品牌名称的列表项。之后，我们使用了‘.cars :nth-child(2n)’ CSS选择器来选择列表项中的偶数元素。在这里，‘even’被替换为‘2n’。然而，它给出了与‘even’相同的输出结果。
<html>
<head>
<style>
.cars :nth-child(2n) {
padding: 5px;
margin: 5px;
color: red;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> :even pseudo class </i> to select even elements in the list items</h3>
<ul class = "cars">
<li> Audi </li>
<li> BMW </li>
<li> Mercedes </li>
<li> Jaguar </li>
<li> Porsche </li>
<li> Verna </li>
<li> Nexon </li>
</ul>
</body>
</html>
用户学会了在列表项中使用“:even”和“:odd”伪类。由于某些浏览器不支持“:even”和“:odd”伪类，因此我们需要使用nth-child()方法。