添加内容并将内容设置为第一个对象＆＃39;儿童

Question

我想选择页面的第一个<fieldset>，然后在<legend>内容中提供::after。

我通过选择fieldset:first-child > legend::after {来尝试，但这并没有给它任何风格。

我也通过选择fieldset > legend:first-child::after {来尝试，但这会为所有图例添加内容，因为它是字段集的第一个孩子。

我的代码达到了结果：

预期/想要的结果

jsFiddle DEMO that replicates the issue

非常欢迎任何仅限CSS的建议和/或解决方案。

Answer 1

尝试将fieldset > legend::after更改为fieldset:first-of-type > legend::after。 :first-item不是有效的选择器，但:first-of-type会完成您的目标。

fieldset:first-of-type > legend::after {
    content: " ADDED CONTENT";
    color:red;
    font-weight:bold;
}

<fieldset>
    <legend>This legend needs added content</legend>
</fieldset>

<fieldset>
    <legend>This legend doesn't need added content</legend>
</fieldset>

<fieldset>
    <legend>This legend doesn't need added content</legend>
</fieldset>

JS小提琴： http://jsfiddle.net/t7uyg96e/

Answer 2

Try with the first-child

fieldset:first-child > legend::after {
    content: " ADDED CONTENT";
    color:red;
    font-weight:bold;
}

Answer 3

试试这个CSS片段：

fieldset:first-child > legend::after {
    content: " ADDED CONTENT";
    color: red;
    font-weight: bold;
}