Question

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

我只知道这件事：

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

感谢

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

Answer 2

使用fieldset:first-child查看此fiddle，只需清除您的问题，以便我们为您提供帮助，如果我是对的，请查看小提琴。

Answer 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

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

3 个答案: