如何正确从第10个.bfaText元素开始应用边框样式？

你用的.bfaText:nth-child(n + 10)选择器逻辑有误。nth-child(n+10)是匹配某个父元素下的第10个及以后的子元素，同时要求该子元素带有.bfaText类。但你的HTML结构里，每个.bfaText的父元素是<ol>，里面交替排列着<li>和<div.bfaText>，所以每个.bfaText在父元素里的位置都是偶数位（第2、4、6...个）。当父元素里的子元素总数到10时，对应的.bfaText其实是第5个（10个子元素里有5个div），这就是样式提前生效的核心原因。

而且这个选择器根本没法实现“全局第10个及以后的.bfaText”的需求——CSS没有原生选择器能直接选中页面中第n个同类元素。

方法一：JavaScript实现（推荐，灵活可靠） #

通过JS选中所有.bfaText元素，给第10个及以后的元素添加自定义类，再用CSS给这个类加样式：

// 获取所有.bfaText元素
const bfaTextElements = document.querySelectorAll('.bfaText');
// 从第10个开始（索引从0起步，对应索引9）
for (let i = 9; i < bfaTextElements.length; i++) {
  bfaTextElements[i].classList.add('bordered-bfaText');
}

对应的CSS：

.bordered-bfaText {
    border: 2px solid orange;
    margin-bottom: 1px;
    padding-left: 10px;
}

方法二：CSS硬编码（仅适合固定数量的场景） #

如果页面中.bfaText的数量和位置完全固定，比如第一个<ol>里有1个，第二个<ol>里有12个，那么第10个全局.bfaText就是第二个<ol>里的第9个.bfaText，可以这样写CSS：

/* 第二个ol下的第9个及以后的.bfaText */
.lmn-list-group-initial:nth-child(2) .bfaText:nth-of-type(n + 9) {
    border: 2px solid orange;
    margin-bottom: 1px;
    padding-left: 10px;
}

但这种方法局限性大，一旦.bfaText的数量或结构变动，样式就会失效。

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