Question

有没有什么方法可以使用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.这可能吗？根据其兄弟姐妹的属性，我最接近选择一个元素是什么？

Answer 1

是否有CSS'兄弟包含'选择器？

CSS中没有'contains'或父选择器，因此没有'sibling contains'或'sibling是'selector'的父级。

我想选择任何具有“红色”类的SPAN，但仅当相邻（在同一行中）TD元素包含具有“蓝色”类的跨度时。因此，它会影响细胞A，但不影响细胞C.这可能吗？根据其兄弟姐妹的属性，我最接近选择一个元素是什么？

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

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

Answer 2

有相邻的（+）和一般（~）兄弟选择器，但是仍然不能用你当前的标记来解决，正如@BoltClock所解释的那样。但是，如果您将标记更改为：

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

即。将您的课程移至<td>而不是<span>，您应该有更多的运气：

td.red + td.blue会选择关注 td.blue元素的所有td.red元素。

是否有CSS'sibling包含'选择器？

2 个答案: