CSS：将背景颜色应用于ul li菜单的第一个子项

1. 背景

CSS中的背景色经常用于网页中的各种元素。无论是页面的整个背景色，还是某个特定区域或元素的背景颜色，都可以使用CSS来进行控制。

1.1 ul li菜单

在网页中，经常有类似于导航菜单的元素。这些菜单通常由一个无序列表（即ul元素）和若干个列表项（即li元素）组成。使用CSS对这些菜单进行样式设置时，需要对每个列表项分别进行设置。

下面是一个简单的ul li菜单的示例：

<ul>
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
  <li>菜单项4</li>
</ul>

针对这样的菜单，我们有时需要对第一个列表项进行特殊的样式设置。

2. 实例

现在我们想要将ul li菜单的第一个子项的背景颜色设置为红色。具体的做法如下：

ul li:first-child {
  background-color: red;
}

这里使用了CSS3的:first-child伪类，表示选择ul元素下的第一个li元素。然后对这个li元素进行样式设置，将其背景颜色设为红色。

这个样式设置将只会对第一个列表项生效，其它列表项的样式不会受到影响。

这里需要注意的是，如果ul元素内部还有其它元素（例如一个div元素），那么这些元素也会计入:first-child伪类的判断范围。如果我们只想选择ul元素下直接的第一个li元素，而不是其它元素，可以使用:first-of-type伪类。

3. 总结

:first-child伪类可以用于选择某个元素的第一个子元素。在ul li菜单中，我们可以使用这个伪类对第一个列表项进行特殊样式设置。

下面是一个完整的示例：

<ul>
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
  <li>菜单项4</li>
</ul>

ul li:first-child {
  background-color: red;
}