CSS伪类:nth-child匹配目标元素错误的通用解决方法

:nth-child 伪类的计数规则是统计父元素下**所有子元素（不区分标签、class）**的位置，你写的section.pi-panel:first-child实际匹配逻辑是：「元素是父元素的第一个子元素 且 是section标签、带pi-panel类」。只要父容器下section前面存在h2或其他任何元素，这个选择器就会匹配失败。手动偏移计数数值只能适配前置元素数量固定的场景，前置元素数量变动就必须改代码，没有通用性。

方案1：使用:nth-of-type伪类（当前场景最优解） #

:nth-of-type 伪类只会统计同标签名的同级元素位置，完全忽略其他标签类型的前置元素。你代码中所有面板都是<section>标签，直接把选择器中针对section的:nth-child替换为:nth-of-type即可，无论section前面插入多少个h2、div或其他类型元素，选择器都能精准定位到第N个section面板，不需要修改序号。

修改后的完整CSS代码如下：

.portable-infobox.pi-theme-UUInfo section.pi-panel:first-of-type ul.wds-tabs li.wds-tabs__tab:nth-child(2){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_1_icon.png");
    background-size:10px;
    height:100px;
    background-color:#f00;
}
.portable-infobox.pi-theme-UUInfo section.pi-panel:nth-of-type(2) ul.wds-tabs li.wds-tabs__tab:nth-child(3){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_2_icon.png");
    background-size:10px;
}
.portable-infobox.pi-theme-UUInfo section.pi-panel:nth-of-type(3) ul.wds-tabs li.wds-tabs__tab:nth-child(3){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_0_icon.png");
    background-size:10px;
}

注：代码中选择tab项li.wds-tabs__tab的:nth-child不需要修改，因为这些li的父元素是<ul class="wds-tabs">，ul内部的子元素只有li标签，:nth-child和:nth-of-type效果完全一致，不受其他元素干扰。

方案2：通用兄弟选择器方案（适配多标签同class场景） #

如果后续面板标签不统一（比如部分面板是div、部分是section，共用pi-panel类），没法用:nth-of-type按标签筛选，可以用通用兄弟选择器~实现同class元素的计数定位，原理是A ~ B会匹配所有在A之后的同级B元素，完全忽略中间插入的其他类型元素：

• 第1个.pi-panel：直接写.pi-panel
• 第2个.pi-panel：.pi-panel ~ .pi-panel
• 第3个.pi-panel：.pi-panel ~ .pi-panel ~ .pi-panel
  使用时注意按从后往前的优先级写样式，避免靠前的选择器匹配到后面的元素，比如先给第3个面板写样式，再写第2个，最后写第1个，靠CSS优先级覆盖即可。

• 不要依赖:nth-child匹配带特定class的元素位置，只要父容器可能插入其他类型子元素，选择器就有失效风险。
• Fandom的便携信息框（Portable Infobox）可能随平台迭代插入额外的装饰性DOM节点，用:nth-of-type或兄弟选择器的写法抗干扰能力更强，不需要随平台结构调整反复修改CSS。

内容的提问来源于stack exchange，提问作者DarkZeus