CSS 选择器第一个|极客教程

CSS 选择器第一个

在 CSS 样式表中，我们经常会使用选择器来选中页面中的元素并对其应用样式。其中，first-child 是一种常用的选择器，它可以选中某个元素的第一个子元素。除了 first-child，我们还可以使用其他选择器来选中第一个元素，本文将详细介绍 CSS 中几种选中第一个元素的选择器。

1. :first-child 选择器

:first-child 选择器用于选中某个元素的第一个子元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:first-child 选择器示例</title>
  <style>
    div p:first-child {
      color: red;
    }
  </style>
</head>
<body>

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

</body>
</html>

在这个示例中，我们选中了 div 元素的第一个 p 子元素，并将其颜色设为红色。效果如下：

第一个段落（红色）
第二个段落

2. :first-of-type 选择器

:first-of-type 选择器用于选中某个元素类型的第一个元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:first-of-type 选择器示例</title>
  <style>
    div p:first-of-type {
      color: blue;
    }
  </style>
</head>
<body>

<div>
  <p>第一个段落</p>
  <span>第一个 span</span>
  <p>第二个段落</p>
</div>

</body>
</html>

在这个示例中，我们选中了 div 元素下的第一个 p 元素，并将其颜色设为蓝色。效果如下：

第一个段落（蓝色）
第一个 span
第二个段落

3. :nth-child() 选择器

:nth-child() 选择器允许我们选中某个元素的特定子元素，其中 n 表示一个整数，用于指定选择的顺序。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>:nth-child() 选择器示例</title>
  <style>
    div p:nth-child(2) {
      color: green;
    }
  </style>
</head>
<body>

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>

</body>
</html>

在这个示例中，我们选中了 div 元素下的第二个 p 元素，并将其颜色设为绿色。效果如下：

第一个段落
第二个段落（绿色）
第三个段落

4. JavaScript 选择器

除了 CSS 选择器外，我们还可以使用 JavaScript 选中页面中的元素。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 选择器示例</title>
  <style>
    .highlight {
      color: purple;
    }
  </style>
</head>
<body>

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

<script>
  const firstParagraph = document.querySelector('div p:first-of-type');
  firstParagraph.classList.add('highlight');
</script>

</body>
</html>

在这个示例中，我们使用 JavaScript 选中了 div 元素下的第一个 p 元素，并为其添加了 highlight 类，使其文字颜色变为紫色。

通过本文的介绍，相信读者已经了解了 CSS 中几种选中第一个元素的选择器，包括 :first-child、:first-of-type 和 :nth-child()。在实际开发中，根据具体情况选择合适的选择器来满足需求。