后端开发教程 - Java、Spring Boot 实战 - msg200.com
停止在每个 HTML 元素中使用 ID 和类！
哦！所以，这是我最近才意识到的。如果你是 Web 开发领域的新手，那么你很容易忘记 CSS 属性选择器的所有变体，而只是选择创建特定的类或 ID 来设置页面中特定元素的样式。
举个例子？假设你有一个包含 10 个 flex 项目的 flex 容器，如下所示：
<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-child和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为:first-of-type或:nth-child(1)，并且在本例中也:last-child可以替换为，它们仍然会提供相同的结果！区别在于，只会在容器/父元素中查找该元素的第一次出现，即使它不是容器/父元素的第一个子元素。所以，如果我稍微修改一下上面 Row 显示的代码，添加如下代码：:last-of-type:first-of-typeh1
<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>
使用:first-child或:nth-child(1)不起作用！因为容器的第一个子元素是h1。但它仍然可以与 一起使用:first-of-type，因为它会查找.item2容器中第一个出现的类。换句话说，:first-child和:nth-child在这种情况下更具体，并且如果您想要定位一个非常具体的元素位置，建议在实践中使用。