在 CSS 中将 :even 和 :odd 伪类与列表项结合使用

cssweb developmentfront end technology更新于 2024/5/30 11:56:17

CSS 包含各种伪类。":even"和":odd"就是其中之一。它们用于选择可选子元素。有时，开发人员需要使用不同的样式来设计可选元素。在这种情况下，他们可以使用特定的 CSS 选择器来选择偶数和奇数元素。

在本教程中，我们将学习如何将 ":even" 和 ":odd" 伪类与列表项结合使用。

将 ":odd" 伪类与列表项结合使用

":odd"伪类用于选择位于奇数位置的 HTML 元素。我们可以使用 :odd 类和 nth-child() CSS 方法选择列表项的所有子元素。

语法

用户可以按照以下语法使用 :odd 伪类选择奇数位置的所有列表项。

li:nth-child(odd) {
/* CSS 代码 */
}

在上述语法中，我们使用了 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"类名。我们使用了 '.foods:nth-child(2n + 1)' CSS 选择器来选择奇数项。在这里，用户可以观察到类名和 nth-child() 方法之间的空格。此外，我们传递了"2n+1"作为参数，而不是 odd，因为两者的作用相同。

在输出中，我们可以看到 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 代码 */
}

在上述语法中，用户可以在声明块中编写 CSS 代码，以将其应用于偶数元素。

示例

在下面的示例中，我们创建了列表项。它包含"粉色"和"蓝色"替代文本。

我们在 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>

示例

我们在下面的示例中创建了包含汽车品牌名称的列表项。之后，我们使用 CSS 选择器".cars:nth-child(2n)"来选择列表项中的偶数元素。这里，"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() 方法一起使用。