CSS3的first-child选择器实战攻略

CSS3的first-child选择器实战攻略

CSS3的first-child选择器可以选择某个元素的第一个子元素，并对其进行样式设置。下面是一些使用first-child与其他选择器结合的示例：

示例一

HTML代码：

<ul class="list">
  <li class="item">列表项1</li>
  <li class="item">列表项2</li>
  <li class="item">列表项3</li>
  <li class="item selected">列表项4</li>
  <li class="item">列表项5</li>
</ul>

CSS代码：

.list .item:first-child {
  font-weight: bold;
}

在这个示例中，我们设置了.list下的第一个.item元素的字体加粗，也就是列表项1。

示例二

HTML代码：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <p>3</p>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

CSS代码：

.container :first-child {
  background-color: #eee;
}

在这个示例中，我们选择了.container内的第一个元素（是div.box元素），并设置了它的背景颜色为#eee。需要注意的是，在这个示例中，我们使用了子元素选择器（子孙选择器），空格与:first-child相连，表示选择.container内的第一个元素（即div.box元素），而不是选择第一个子元素后代元素（如p元素）。

通过以上两个示例，我们可以看到在使用CSS3的first-child选择器时，需要根据具体情况进行选择器的书写，避免出现选择错误的情况。