Question

CSS是否可以检查子元素是否具有同级元素？示例：

<div class="node">
    <div class="node-child"></div>
    <div class="node-child"></div>
    <div class="node-child"></div>
</div>

我基本上想编辑最后一个孩子，但前提是它没有另一个要处理的东西并且它是一个奇数。因此，如果有4个node-child，则不执行任何操作，但如果只有3个，则执行X

Answer 1

当然，将:first-child和:last-child组合成一个选择器：

.node-child:first-child:last-child {
    /* Styles for when it is one element with no siblings */
}

或相反，应该是：

.node-child:first-child:not(:last-child),
.node-child:last-child:not(:first-child),
.node-child:not(:first-child):not(:lsat-child), {
   /* Styles for when there are more than one, i.e. ther are siblings */
}

要针对您的特定情况更加简洁，请使用:only-child，其中等价于：

.node-child:only-child {
    /* Styles for when it is one element with no siblings */
}

相反，甚至更干净：

.node-child:not(:only-child) {
    /* Styles for when it is one element with no siblings */
}

假设您当然不支持IE8，使用only-child是绝对安全的！

CSS是否可以检查子元素是否具有同级元素？

1 个答案: