html - 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第一个目标，然后使用默认样式作为第二个。

例如

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

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

Answer 2

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

关于所有可能的CSS2 选择器，您可以阅读规范以使自己理解：使用 css 选择器可以做什么，不能做什么

可能是我在 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，但仍希望它们具有不同的样式，那么为每个字段集使用内联 CSS 怎么样？

在仍然想使用 CSS 的同时避免使用类和 id 是否有特别好的理由？稍微详细一点，我们或许可以给你一个更好的答案。

Answer 5

如果您想避免使用 ID 或类名，请选择 first-child 属性。

例如 -

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