<分区>
标签 html css css-selectors
<分区>
我正在尝试使用 :before 添加内容，仅针对第一个“小”元素，但我当前的代码仅在所有“小”元素之前添加内容？
small:nth-of-type(1):before {
content: 'ONE TIME OFFER - ONLY ';
color: #cc3300;
font-weight: 700;
}<div><span class="bold_help_text"><small> first text content!</small></span></div>
<div class="option_textbox">
<span class="bold_help_text"><small>second text content!</small></span>我希望文本“ONE TIME OFFER - ONLY”出现在第一个“small”元素中，但它出现在两个元素中。
最佳答案
根据OP的源代码，以下更改应该满足OP的要求:
来自:
.bold_help_text>small:before {
...
}
收件人:
.bold_option_textbox span.bold_help_text:first-of-type>small:before {
...
}
演示:
.container > div:first-of-type small:before {
content: 'ONE TIME OFFER - ONLY ';
color: #cc3300;
font-weight: 700;
}<div class="container">
<div>
<span class="bold_help_text">
<small> first text content!</small>
</span>
</div>
<div class="option_textbox">
<span class="bold_help_text">
<small>second text content!</small>
</span>
</div>
</div>简而言之，我正在查看 .container 的第一个 div 子元素，然后寻找它的 small 标签。
关于html - 如何只在第一个类型元素中添加内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57548899/