用css完成根据子元素不同书写样式的方法

实现根据子元素不同书写样式的方法有多种方式，例如使用CSS选择器的 :nth-child 或者 :nth-of-type 伪类，以及使用 JavaScript 等方法。以下是其中两种方法的示例说明：

方法一：使用CSS选择器的 :nth-child 伪类

:nth-child(n) 伪类选择器用于匹配某个元素的父元素下第 n 个子元素，可以用来实现对子元素进行差异化的样式设置。例如，我们可以使用 :nth-child(odd) 来设置奇数行的背景色为灰色，偶数行的背景色为白色：

/* HTML 结构 */
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
</ul>

/* CSS 样式 */
li:nth-child(odd) {
  background-color: #ccc;
}

li:nth-child(even) {
  background-color: #fff;
}

这样就能够实现对列表的奇偶行进行差异化样式的设置了。类似地，我们还可以使用 :nth-child(n) 来对列表的前几项或后几项进行样式设置。

方法二：使用CSS选择器的 :nth-of-type 伪类

:nth-of-type(n) 伪类选择器与 :nth-child(n) 伪类选择器类似，只是它只匹配某个元素的父元素下同类元素中的第 n 个。例如，如果我们希望对一个带有多个 div 元素的容器中的每个第三个 div 元素做样式设置，可以这样写：

/* HTML 结构 */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

/* CSS 样式 */
.item:nth-of-type(3n) {
  color: red;
}

这样就能够实现对容器中每个第三个 div 元素设置红色文本颜色了。

需要注意的是，:nth-child(n) 和 :nth-of-type(n) 伪类选择器只支持数字参数，不能使用变量或表达式。同时在 IE8 及以下的浏览器中不支持这些伪类选择器。如果您的站点需要支持老版本的浏览器，则需要使用 JavaScript 或其他方式实现类似的效果。