标题中的样式，每个用于不同的字段集答案

【问题标题】：styles in header, each for a different fieldset标题中的样式，每个用于不同的字段集
【发布时间】：2016-05-05 08:08:07
【问题描述】：

我有 2 个字段集，我需要为两者使用不同的边框颜色，并且样式需要在标题中如何区分这两个字段集？

我只知道这个：

<style type="text/css">
            fieldset {border-color:red;}
        </style>

谢谢

【问题讨论】：

标签： html css colors styles border

【解决方案1】：

您可以简单地添加类来区分它们。

html标签

<fieldset class="set-1">
    <!-- your code here -->
</fieldset>
<fieldset class="set-2">
    <!-- your code here -->
</fieldset>

CSS 代码

fieldset.set-1 {border-color:red;}
fieldset.set-2 {border-color:green;}

【讨论】：

【解决方案2】：

使用fieldset:first-child 看看这个fiddle，只需明确您的问题，以便我们可以帮助您，如果我是对的，请检查小提琴。

【讨论】：

【解决方案3】：

您可以使用 first-child 和 last-child 伪选择器来做到这一点

简单示例：

HTML：

<fieldset>
    <legend>Fieldset 1</legend>
    Content goes here 1
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    Content goes here 2
</fieldset>

CSS：

/* Select first fieldset */
fieldset:first-child {
  background: #999;
  color: purple;
  border-color: purple;
}
/* Select last fieldset */
fieldset:last-child {
  border-color: green;
  color: green;
  background: white;
}
/* set some properties to all legends */
fieldset legend {
  font-weight: bold;
  color: #111;
}

Demo

【讨论】：