Html 为什么一般兄弟组合器不总是工作？

我有四个div，我想在悬停时改变它们的宽度和高度，这样你悬停的那一个会展开，而其他所有的都会缩小到悬停的那一个的展开程度。当我在第一个div上盘旋时，我设法让它工作，但是当我尝试在其他三个div上做同样的事情时，什么也没有发生。 我的HTML：

所以当我停在mainOne上时，一切都变了，但当我停在mainTwo上时，只是mainTwo变了，把其他一切都搞糟了。我做错了什么？

---

谢谢。

您所有的

main两个
规则与
：hover
使用相邻的兄弟组合符

只有
#mainTwo+#maintree
可以匹配，因为
#maintone
或
#maintfour
都不是
#mainTwo
的下一个兄弟

如果您使用了通用同级组合符（
~
），那么您也可以匹配
#mainFour

由于
#maintone
在
#mainTwo
之前，因此无法将其与依赖于
#mainTwo
存在的规则进行匹配。所有
mainTwo
规则与
一起：悬停
使用相邻兄弟组合符

只有
#mainTwo+#maintree
可以匹配，因为
#maintone
或
#maintfour
都不是
#mainTwo
的下一个兄弟

如果您使用了通用同级组合符（
~
），那么您也可以匹配
#mainFour

由于
#maintone
在
#mainTwo
之前，您无法将其与依赖于
#mainTwo
存在的规则相匹配，CSS只能（）针对DOM中稍后出现的元素，因此
#mainTwo+#mainTwo
将起作用，但
#mainTwo+#mainTwo
无法

要以以前的兄弟姐妹为目标，您必须将兄弟姐妹包装在另一个父元素中，然后根据父元素的悬停设置以前兄弟姐妹的样式

div > div {
    border: 1px solid #000;
    padding: 0.5em 1em;
    width: 80%;
    margin: 0 auto;
    color: #f00;
}

#main:hover > div {
    width: 50%;
}

#main:hover > div:hover ~ div {
    width: 50%;
}

#main:hover > div:hover {
    width: 80%;
}

CSS只能（）针对DOM中稍后出现的元素，因此
#mainTwo+#mainTwo
可以工作，但
#mainTwo+#maintone
不能

要以以前的兄弟姐妹为目标，您必须将兄弟姐妹包装在另一个父元素中，然后根据父元素的悬停设置以前兄弟姐妹的样式

div > div {
    border: 1px solid #000;
    padding: 0.5em 1em;
    width: 80%;
    margin: 0 auto;
    color: #f00;
}

#main:hover > div {
    width: 50%;
}

#main:hover > div:hover ~ div {
    width: 50%;
}

#main:hover > div:hover {
    width: 80%;
}

谢谢，我换了组合数，但结果还是一样的。谢谢，我换了组合数，但结果还是一样的。我现在明白了问题所在，我注意到现在除了mainOne之外，所有东西都缩小了，因为它在mainTwo之前，但看起来这个解决方案对我来说有点太复杂了，所以我会花时间去理解它。非常感谢。我现在明白了问题所在，我注意到现在除了mainOne之外，所有的东西都缩小了，因为它在Main2之前，但是看起来这个解决方案对我来说有点太复杂了，所以我会花时间去理解它。谢谢。
div > div {
    border: 1px solid #000;
    padding: 0.5em 1em;
    width: 80%;
    margin: 0 auto;
    color: #f00;
}

#main:hover > div {
    width: 50%;
}

#main:hover > div:hover ~ div {
    width: 50%;
}

#main:hover > div:hover {
    width: 80%;
}