选择第一个子元素

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 13 课，共 43 课。

:first-child 伪类会选中一组兄弟元素中的第一个元素。

例如：

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

作为父元素第一个子元素的段落会显示为蓝色，文字也会加粗。

p:first-child {
  color: blue;
  font-weight: bold;
}

你可以组合并应用后代选择器、子选择器和其他选择器，更具体地选中元素。下面是另一个示例：

div:first-child h1 {
 color: red;
}

这会在同级元素中选中第一个 div 元素，然后将其中 <h1> 标签的文本颜色改为红色。

挑战

简单

创建一条 CSS 规则，选中任意无序列表（<ul>）中的第一个列表项（<li>），并为其设置以下样式：

蓝色文本
浅黄色背景
左侧内边距为 10 像素

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>