时间戳

首页 > 解决方案 > CSS 与 :After :NTH-Child

html - CSS 与 :After :NTH-Child

问题描述

.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>

标签： htmlcss

解决方案

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

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

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

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

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

以下片段显示了这一点：

.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>

推荐阅读