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

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;
}