关于CSS通用兄弟选择器（~）的疑问：为何div4被选中？

你的核心误区 #

你错把div#div4当成了被div ~ div直接选中的元素，但实际上它的红色是继承父元素div#div3的样式来的——真正被选择器匹配的是div3，div4作为它的子元素，自动继承了红色文本的样式。

为什么div3会被选中 #

div ~ div的规则很明确：选择所有跟在某个div后面、且和这个div同属一个父级的div。

• div#div3的父级是div#div1，在div1的子元素里，div3排在div#div2（一个div元素）之后，完全符合规则，所以被选中，应用了红色文本样式。

为什么会误以为div4被直接选中 #

CSS里的color属性是可向下继承的，div3变成红色后，它内部的所有内容（包括div4、div5还有文本“div3”）都会跟着继承这个颜色。所以你看到div4是红色，但它根本没被div ~ div直接选中。

验证方法 #

给选择器加个边框就能直观区分：

div ~ div{
    color: red;
    border: 1px solid blue;
}

此时你会发现，只有div3和div5（div5跟在div4后面，同属div3的子元素，符合选择器规则）会显示蓝色边框，div4没有边框，这就证明它只是继承了颜色，并未被选择器直接匹配。

内容的提问来源于stack exchange，提问作者bylal