0

有什么方法可以使用 CSS 来设置元素的样式，这取决于子元素的类（如果它的兄弟姐妹）？还是其父母兄弟姐妹的孩子？

例如，假设我有这张表：

<table>
    <tr><td><span class='red'>A</span></td><td><span class='blue'>B</span></td></tr>
    <tr><td><span class='red'>C</span></td><td><span class='red'>D</span></td></tr>
</table>

我想选择任何具有“红色”类的 SPAN，但前提是相邻（在同一行中）TD 元素包含具有“蓝色”类的跨度。所以，它会影响单元格 A，但不会影响单元格 C。这可能吗？根据兄弟姐妹的属性，我最接近选择元素的方法是什么？

4

2 回答 2

1

是否有 CSS 'sibling contains' 选择器？

CSS 中没有“包含”或父选择器，因此反过来也没有“同级包含”或“同级是”选择器的父级。

我想选择任何具有“红色”类的 SPAN，但前提是相邻（在同一行中）TD 元素包含具有“蓝色”类的跨度。所以，它会影响单元格 A，但不会影响单元格 C。这可能吗？根据兄弟姐妹的属性，我最接近选择元素的方法是什么？

兄弟组合器只允许您使用您已经可用的东西（例如 ID、类、伪类和属性），根据同一级别的兄弟元素来匹配元素。

在您的情况下，您的span元素根本不是彼此的兄弟姐妹，但它们的 parenttd是。但是由于没有提到的父选择器，您不能td根据其兄弟的孩子来选择第一个的孩子。因此，对于您当前的标记，仅使用 CSS 是不可能的。

于 2013-04-16T11:10:34.527 回答
0

有相邻的 ( +) 和通用 ( ~) 同级选择器，但正如 @BoltClock 所解释的那样，这仍然不会帮助您使用当前的标记。但是，如果您将标记更改为：

<table>
    <tr><td class="red><span>A</span></td><td class="blue"><span>B</span></td></tr>
</table>

IE。将您的课程移动到<td>s 而不是<span>s 您应该有更多的运气：

td.red + td.blue将选择td.blue元素后面的所有元素。td.red

于 2013-04-16T12:24:44.607 回答