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

Question

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

编辑当然不使用类和 ID...

这是我的代码

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

这给了我这个:

我想要这个:

Answer 1

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