CSS 选中偶数|极客教程

CSS 选中偶数

在CSS中，我们经常需要选择元素的奇数或偶数项来进行样式设置。这在设计网页布局时非常有用，可以让页面看起来更加美观和整齐。本文将详细介绍如何使用CSS选择器来选中偶数项，并提供多个示例代码来帮助读者更好地理解。

1. 使用:nth-child()选择器选中偶数项

:nth-child()选择器可以根据元素在其父元素中的位置来选择特定的元素。通过结合:nth-child()选择器和even关键字，我们可以选择所有偶数项元素。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
  li:nth-child(even) {
    background-color: lightblue;
  }
</style>
</head>
<body>
<ul>
  <li>Item 1 - geek-docs.com</li>
  <li>Item 2 - geek-docs.com</li>
  <li>Item 3 - geek-docs.com</li>
  <li>Item 4 - geek-docs.com</li>
  <li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>

代码运行结果:

CSS 选中偶数

在上面的示例中，我们使用:nth-child(even)选择器选中所有偶数项li元素，并设置它们的背景颜色为浅蓝色。当页面加载时，你会发现第2、4项li元素的背景颜色变为浅蓝色。

2. 使用:nth-of-type()选择器选中偶数项

除了:nth-child()选择器外，我们还可以使用:nth-of-type()选择器来选中元素的偶数项。不同之处在于:nth-of-type()选择器只会考虑元素的类型，而不会考虑元素在文档中的位置。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
  li:nth-of-type(even) {
    color: red;
  }
</style>
</head>
<body>
<ul>
  <li>Item 1 - geek-docs.com</li>
  <li>Item 2 - geek-docs.com</li>
  <li>Item 3 - geek-docs.com</li>
  <li>Item 4 - geek-docs.com</li>
  <li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>

代码运行结果:

CSS 选中偶数

在上面的示例中，我们使用:nth-of-type(even)选择器选中所有偶数项li元素，并设置它们的文字颜色为红色。当页面加载时，你会发现第2、4项li元素的文字颜色变为红色。

3. 使用JavaScript动态添加偶数项样式

有时候我们需要根据用户的操作或其他条件来动态添加偶数项的样式。这时候可以使用JavaScript来实现。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
  .even {
    background-color: lightgreen;
  }
</style>
</head>
<body>
<ul id="list">
  <li>Item 1 - geek-docs.com</li>
  <li>Item 2 - geek-docs.com</li>
  <li>Item 3 - geek-docs.com</li>
  <li>Item 4 - geek-docs.com</li>
  <li>Item 5 - geek-docs.com</li>
</ul>
<script>
  const list = document.getElementById('list');
  const items = list.getElementsByTagName('li');
  for (let i = 0; i < items.length; i++) {
    if (i % 2 === 1) {
      items[i].classList.add('even');
    }
  }
</script>
</body>
</html>

代码运行结果:

CSS 选中偶数

在上面的示例中，我们使用JavaScript动态地为偶数项li元素添加了背景颜色为浅绿色的样式。当页面加载时，你会发现第2、4项li元素的背景颜色变为浅绿色。

4. 使用CSS伪类选择器选中偶数项

除了:nth-child()和:nth-of-type()选择器外，CSS还提供了一些伪类选择器来选择偶数项元素。下面是一些常用的伪类选择器示例代码：

4.1 :nth-child(2n)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
  li:nth-child(2n) {
    font-weight: bold;
  }
</style>
</head>
<body>
<ul>
  <li>Item 1 - geek-docs.com</li>
  <li>Item 2 - geek-docs.com</li>
  <li>Item 3 - geek-docs.com</li>
  <li>Item 4 - geek-docs.com</li>
  <li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>

代码运行结果:

CSS 选中偶数

在上面的示例中，我们使用:nth-child(2n)选择器选中所有偶数项li元素，并设置它们的字体加粗。当页面加载时，你会发现第2、4项li元素的字体变为加粗。

4.2 :nth-of-type(2n)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Even Items</title>
<style>
  li:nth-of-type(2n) {
    text-decoration: underline;
  }
</style>
</head>
<body>
<ul>
  <li>Item 1 - geek-docs.com</li>
  <li>Item 2 - geek-docs.com</li>
  <li>Item 3 - geek-docs.com</li>
  <li>Item 4 - geek-docs.com</li>
  <li>Item 5 - geek-docs.com</li>
</ul>
</body>
</html>

代码运行结果:

CSS 选中偶数