CSS with :After :NTH-Child [重复]答案

【问题标题】：CSS with :After :NTH-Child [duplicate]CSS with :After :NTH-Child [重复]
【发布时间】：2021-04-27 20:04:02
【问题描述】：

.app-btn {
  font-size: 0px !important;
}

.app-btn:after {
  content: '+2500';
  visibility: visible;
  font-size: 15px !important;
}

.app-btn:after:nth-child(1) {
  content: "+18000";
}

.app-btn:after:nth-child(2) {
  content: "+14000";
}

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

<div class="app" data-url="#">
  <button class="app-btn">CHANGE</button>
</div>

【问题讨论】：

.app:nth-child(2) > .app-btn:after
::after 不会替换现有内容。为此，您需要 Javascript，或删除预先存在的内容“CHANGE”。接下来，您的选择器中的顺序错误。相反，请使用.app-btn:nth-child(1)::after。

标签： html css

【解决方案1】：

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

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

实际上，每个按钮都是父级 div 的唯一子级，因此选择器实际上没有意义。

改为在父 div 上使用 nth-child（或者，可能是 nth-of-type），然后将样式应用于后代 app-btn：

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

以下 sn-p 显示了这一点：

.app > .app-btn {
  font-size: 0px !important;
}

.app > .app-btn:after {
  content: '+2500';
  visibility: visible;
  font-size: 15px !important;
}

.app:nth-child(1) > .app-btn:after {
  content: "+18000";
}

.app:nth-child(2) > .app-btn:after {
  content: "+14000";
}

<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>
<div class="app" data-url="#">
    <button class="app-btn">CHANGE</button>
</div>

【讨论】：