Html 带有：After:n子对象的CSS

.app btn{
字体大小：0px！重要；
}
.app btn：之后{
内容：“+2500”；
能见度：可见；
字体大小：15px！重要；
}
.app btn:之后：第n个子项（1）{
内容：“+18000”；
}
.app btn:之后：第n个孩子（2）{
内容：“+14000”；
}

改变
改变
改变

这只是使用CSS选择器的一个问题。这些与按钮不匹配：

.app-btn:after:nth-child(1) { ... }
.app-btn:after:nth-child(2) { ... }

事实上，每个按钮都是父

div

的唯一子按钮，因此选择器实际上没有意义

相反，在父div上使用第n个子项（或者，可能是第n个类型的子项），然后将样式应用于子项

app btn

：

.app:nth-child(1) > .app-btn:after { ... }
.app:nth-child(2) > .app-btn:after { ... }

以下代码段显示了此操作：

.app>.app btn{
字体大小：0px！重要；
}
.app>.app btn:之后{
内容：“+2500”；
能见度：可见；
字体大小：15px！重要；
}
.应用程序：第n个孩子（1）>.应用程序btn:之后{
内容：“+18000”；
}
.应用程序：第n个孩子（2）>.应用程序btn:之后{
内容：“+14000”；
}

改变
改变
改变

.app:n第n个子项（2）>。app btn:after

:after

不会替换现有内容。为此，您需要Javascript，或者删除预先存在的内容“更改”。接下来，选择器中的顺序错误。相反，请使用

.app btn:n第n个子项（1）：：after

。