不要在每个 HTML 元素中使用 ID 和类！

你好！这是我最近才意识到的，如果你是网页开发领域的新手，很容易忘记 CSS 属性选择器的各种变体，而只是选择创建一个特定的类或 ID 来设置页面中特定元素的样式。

举个例子？假设你有一个包含 10 个弹性项目的弹性容器，看起来像这样：

<div class="flex-container-column">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
<div class="item">flex item 4</div>
<div class="item">flex item 5</div>
<div class="item">flex item 6</div>
<div class="item">flex item 7</div>
<div class="item">flex item 8</div>
<div class="item">flex item 9</div>
<div class="item">flex item 10</div>
</div>

您希望第一个弹性项目具有不同的样式background-color。您可能正在考虑为其创建一个 ID，因为此样式仅对该项目唯一，对吗？

那么，如果我们在网站的每个页面上都有一个包含 10 个弹性项目的同一个弹性容器，并且我们希望第一个项目具有相同的样式，该怎么办？很简单，只需给它添加一个类就行了！

理论上可以这样做，但这并非最佳实践！我们应该使用 CSS 属性选择器，更具体地说是 ` :pseudo-classes.`

CSS:pseudo-classes可以帮助您根据 HTML 元素的特定状态来识别它，例如：

• :hover当鼠标悬停在按钮上时
• :active当点击链接或按钮时
• :checked当单选按钮被选中时
• :first-child并将:last-child样式分别应用于其父元素下紧邻的第一个元素和最后一个元素。
• :nth-child将样式应用于一组同级元素中具有特定位置的子元素，例如，每个 中的第三个 'p' div。

利用上面这段示例 HTML 代码，我们可以创建几个带有background-color用例的场景：

我们从上到下开始看。这里有两个显示部分：一列和一行。

柱子

我希望奇数位置的方框（编号 1、3、5、7 和 9 的方框）呈现橙色，所以我使用以下伪类来定位它们，并在括号中指定我要定位奇数。

.item:nth-child(odd) {
  background-color: #FEC8A7;
}

对于偶数位置的方框，我也做了同样的处理，我只是把括号里的“ odd”(even)替换成了“ .”

.item:nth-child(even) {
  background-color: #FCECA5;
}

排

在我的行显示中，我只想显示第一个和最后一个方框。所以这里就需要用到` :first-childand`了：last-child

/* targets the first flex item */
.item2:first-child {
 background-color: #A16AE8; 
}

/* targets the last flex item */
.item2:last-child {
  background-color: #4120A9;
}

有趣的是，你也可以用:first-child`<div>`:first-of-type或 `<div> ` 来替换 `<div>`，而且在这个用例中，`<div> :nth-child(1)` 也:last-child可以被替换:last-of-type，它们仍然会给出相同的结果！区别在于，` :first-of-type<div>` 只会查找容器/父元素中指定元素的第一个实例，即使它不是容器/父元素的第一个子元素。所以，如果我稍微修改一下上面行显示的代码，添加一个h1类似这样的 `<div>`：

<div class="flex-container-row">
<h1>header</h1>
<div class="item2">flex item 1</div>
<div class="item2">flex item 2</div>
<div class="item2">flex item 3</div>
<div class="item2">flex item 4</div>
<div class="item2">flex item 5</div>
<div class="item2">flex item 6</div>
<div class="item2">flex item 7</div>
<div class="item2">flex item 8</div>
<div class="item2">flex item 9</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
</div>

使用 `<div> :first-child` 或 ` :nth-child(1)<div>` 是行不通的！因为容器的第一个子元素是 `<div>` h1。但使用 `<div>` 仍然有效:first-of-type，因为它会查找.item2容器中第一个出现的类。换句话说，在这种情况下，`<div> :first-child` 和 ` :nth-child<div>` 更精确，如果您想要定位到非常具体的元素位置，建议在实践中使用它们。