CSS：是否可以在另一个字段集之前为字段集指定样式？

Question

CSS：是否可以在另一个字段集之前为字段集指定样式？当我的代码中出现两个字段集时，我想将它们应用于特定的样式。

编辑当然没有使用class和id ...

这是我的代码

        <div id="tabs">
            <fieldset class="one">
                <legend>One</legend>
                Text
            </fieldset>
            <fieldset class="two">
                <legend>Two</legend>
                Text
            </fieldset>
        </div>

给我这个：

我想这样：

Answer 1

不使用任何类或ID，您可以使用first-child定位第一个，然后使用默认样式作为第二个。

e.g。

form fieldset{ background: green; }
form fieldset:first-child{ background: red; }

第一个字段集将具有红色背景，其他任何字段集将具有绿色背景。请注意，这适用于同一表单中的字段集。如果它们采用不同的形式，那么您可以使用form:first-child

应用相同的原则

Answer 2

使用CSS，您只能将样式应用于任何元素的子元素或其兄弟元素，这就是为什么我们只能使用fieldset相邻的兄弟选择器在第二个+上应用样式。在下面的演示中，我将展示如何做到这一点。

关于所有可能的 CSS2选择器，您可以在specification中阅读以了解自己：使用css选择器可以制作什么以及

可能是我的解释demo on dabblet.com可以帮助您解决问题。

结果：

HTML标记：

<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>

CSS标记：

/* detect only first fieldset */
fieldset:first-child {
    background-color: green;
}

/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
    background-color: gray; 
}

/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
    background-color: red;
}

Answer 3

为什么不为每个人分配一个特定的班级或ID？

<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>

Answer 4

如果您想避免使用ID或类名，请转到第一个子属性。

例如 -

form fieldset:first-child{
  //your css code here
}

Answer 5

如果您不想使用类或ID，但仍希望它们具有不同的样式，那么如何为每个字段集使用内联CSS？

是否有一个特别好的理由在仍然想要使用CSS时避免使用类和id？通过更多细节，我们可以为您提供更好的答案。