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

Question

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

http://codepen.io/anon/pen/epodxd

如果可能的话，我基本上想在不使用任何其他 CSS 类的情况下为第一个图例元素设置样式。

<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, > 来选择第一个 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;
}