选择除第一个以外的所有兄弟姐妹

Question

是否有一个CSS选择器可以根据.a + .b选择.a ~ .b的赞美？

在不太苛刻的术语中，我想选择所有继承元素的兄弟元素，排除其第一个兄弟继承者。

例如，在所有dl列表中，我将所有dd个元素都涂成某种颜色。但是在内嵌 dl列表中，我希望第一个dd保持dt相同的颜色，但所有后续的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;
}