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

Question

是否有选择的恭维CSS选择器.a + .b相对于.a ~ .b？

在不太苛刻的术语中,我想选择继承元素的所有兄弟元素,不包括它的第一个兄弟继承者.

例如,在所有dl列表中,我将所有dd元素着色为某种颜色.但是在内联 dl列表中,我希望保持第一个dd跟随dt相同的颜色,但所有后续的dds将被更改为另一种颜色.下面是我的代码,显然不是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;
}

但这需要各自dt独立dl,否则你就会遇到问题.如果一般兄弟选择器都在一个列表下,它将不会帮助您,因为它dl.inline > dt + dd ~ dd比任何后续更具体dl > dd.

所以在你的情况下

解决方案是不要重复代码,并且在单个列表下具有特异性而不是覆盖是这样的:

/* 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;
}