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

Question

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

用更少的数学术语来说，我想选择所有继承元素的兄弟元素，不包括它的第一个兄弟继承者。

例如，在所有dl列表中，我将所有dd元素都涂上了某种颜色。但是在内联 dl列表中，我想保持第dd一个dt相同的颜色，但所有后续dd的 s 都将更改为另一种颜色。下面是我的代码，显然不是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;
}