css - 选择除第一个以外的所有 sibling

Question

是否有一个 CSS 选择器选择 .a + .b 相对于 .a ~ .b 的补充？

用不太数学的术语来说，我想选择一个元素之后的所有同级元素，不包括它的第一个同级后继者。

例如，在所有 dl 列表中，我将所有 dd 元素都着色为特定颜色。但是在 inline dl 列表中，我想保持 dt 之后的第一个 dd 颜色相同，但所有随后的 dd 将更改为另一种颜色。下面是我的代码，显然不是DRY .有没有办法在不重新定义颜色的情况下做到这一点？

/* dl lists contain dd terms all colored light aqua */
dl > dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline and colored yellow-green */
dl.inline > dd {
    display: inline;
    background-color: #bada33;
}
/* however, in an inline dl list, the first dd succeeding a dt is colored normally */
dl.inline > dt + dd {
    background-color: #c0ffee;
}

Answer 1

是的，你可以选择补语

在您的简化示例中，它将是这样的:.a + .b ~ .b .您“跳过”第一个 .b通过将其用作通用兄弟选择器的启动点。

如果我理解你的dd要求，那么它将是这样的:

/* dl lists contain dd terms all colored light aqua */
dl > dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline  */
dl.inline > dd {
    display: inline;
}
/* however, in an inline dl list, the first dd succeeding a dt is left 
   to be colored normally and all after it are colored yellow-green */
dl.inline > dt + dd ~ dd {
    background-color: #bada33;
}

但是that requires each dt be in its own dl , 否则 you have issues .如果它们都在一个列表中，一般的兄弟选择器不会帮助你，因为 dl.inline > dt + dd ~ dd比以下任何内容都更具体 dl > dd .

所以在你的情况下

The solution is to keep from repeating code and having specificity not override under a single list is this :

/* dl lists contain dd terms all colored light aqua */
dl > dd,
dl.inline > dt + dd {
    background-color: #c0ffee;
}
/* inline dl lists have dd terms displayed inline  */
dl.inline > dd {
    display: inline;
    background-color: #bada33;
}