CSS样式第一个节点|极客教程

CSS样式第一个节点

在CSS中，我们经常会遇到需要对文档中的第一个节点进行特殊样式设置的情况。比如在一个列表中，我们想要单独对第一个列表项进行样式设置，或者在一个段落中，我们想要对第一个字进行特殊样式设置。这时，我们就可以使用CSS选择器中的:first-child伪类来实现对第一个节点的样式设置。

1. 选择器:first-child

:first-child伪类选择器用于选取某个元素的第一个子元素。它的语法如下：

selector:first-child {
  /* styles */
}

其中selector为要选择的元素的父元素选择器，可以是标签名、类名、ID等。

2. 样式第一个节点示例

2.1 列表中第一个列表项的样式设置

假设我们有一个无序列表，我们想要对第一个列表项应用特殊样式，可以使用:first-child伪类选择器来实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS样式第一个节点示例</title>
  <style>
    ul li:first-child {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
  </ul>
</body>
</html>

在上面的示例中，我们对ul li:first-child选择器应用了红色和加粗的样式，这样就可以使第一个列表项呈现不同于其他列表项的样式。

2.2 段落中第一个字的样式设置

类似地，我们也可以对段落中的第一个字进行特殊样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS样式第一个节点示例</title>
  <style>
    p:first-child::first-letter {
      font-size: 24px;
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个示例段落，第一个字将应用特殊样式。</p>
</body>
</html>

在上面的示例中，我们使用了:first-letter伪元素选择器来选取第一个字母，并应用了蓝色和较大的字体样式。这样就可以使段落的第一个字显示出特殊样式。