CSS 用于视觉（块重排）行中第一个元素的选择器

在本文中，我们将介绍CSS中用于选择视觉（块重排）行中第一个元素的选择器。在网页布局中，特别是在响应式设计中，我们经常需要根据行中的第一个元素进行样式设置或应用特定的样式效果。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

为什么需要选择第一个元素

在网页布局中，元素的位置和排列方式对页面的视觉效果和用户体验至关重要。有时我们希望对行中的第一个元素应用特定样式，例如添加边框、改变背景颜色或设置字体样式。通过选择第一个元素，我们可以轻松地针对特定的行中元素设置样式，提高页面的可读性和吸引力。

CSS选择器：first-child

CSS提供了几种选择器来选择页面中的第一个元素。其中最常用且最简单的选择器之一是first-child选择器。

first-child选择器选择一个元素的父元素下的第一个子元素。通过将first-child选择器与其他选择器（如类选择器、元素选择器或ID选择器）结合使用，我们可以选择第一个元素并应用自定义样式。

下面是一些示例：

.row > div:first-child {
  /* 将应用于行中的第一个元素的样式 */
}

ul li:first-child {
  /* 将应用于无序列表中的第一个列表项的样式 */
}

#container span:first-child {
  /* 将应用于ID为container下的第一个span元素的样式 */
}

CSS选择器：nth-child

除了first-child选择器外，CSS还提供了nth-child选择器，它允许我们选择行中的其他位置的元素。nth-child选择器有着更大的灵活性，可以通过指定不同的参数来选择不同位置的元素。

下面是一些示例：

.row > div:nth-child(2) {
  /* 将应用于行中的第二个元素的样式 */
}

ul li:nth-child(odd) {
  /* 将应用于无序列表中的奇数列表项的样式 */
}

#container span:nth-child(3n) {
  /* 将应用于ID为container下每隔3个span元素的样式 */
}

示例

为了更好地理解在CSS中选择视觉行中第一个元素的选择器，我们举一个例子。假设我们有一个产品列表，每个产品都以一个div元素表示。我们希望将第一行的产品显示为大图模式，而其他行的产品则显示为小图模式。

我们可以使用以下CSS代码来实现这一效果：

.products-row > .product:first-child {
  /* 将第一行的第一个产品显示为大图模式 */
  width: 300px;
  height: 300px;
  background-image: url('big-image.jpg');
}

.products-row > .product {
  /* 将其他行的产品显示为小图模式 */
  width: 150px;
  height: 150px;
  background-image: url('small-image.jpg');
}

通过使用first-child选择器，我们可以仅应用于第一行的第一个产品的样式，而其他行的产品则应用不同的样式。