在嵌套字段集中设置第一个图例元素的样式

Question

我正在尝试为嵌套字段集中的第一个 legend 元素设置样式，但我使用的 CSS 选择器中的 none 实现了我所追求的。

我基本上想在不使用任何其他 CSS class 的情况下设置第一个图例元素的样式。

<fieldset class="nested-parent">
    <legend>Parent</legend>
    <input type="text" size="10" />

    <fieldset>
        <legend>Child</legend>
        <input type="text" size="20" />
    </fieldset>
</fieldset>

.nested-parent legend:first-child {
  color: red;
}

Answer 1

根据您提供的 HTML，您可以使用 child selector, > 以便 select 第一个 legend 元素是 .nested-parent元素：

.nested-parent > legend:first-child {
  color: #f00;
}

我建议改用 :first-of-type pseudo class。在处理元素的类型时会更准确。

Example Here

.nested-parent > legend:first-of-type {
  color: #f00;
}

在嵌套字段集中设置第一个图例元素的样式

Style the first legend element within a nested fieldsets

css

fieldset

legend