CSS如何在当前元素旁边定位元素？

Question

如果我在DOM中并排有2个元素,如下所示:

a.button
div.container

a.button 如果 div.container有课,我想要目标div.container.fullscreen

我在想这样的事情:

div.container.fullscreen + a.button { display:none },但它不起作用.

有什么建议？

Answer 1

+不会工作,因为它是下一个兄弟选择器.

您的选择div.container.fullscreen + a.button将针对a是否真的是下一个紧接其后的div,如

div.container.fullscreen
a.button // this is now targeted

div.container.fullscreen ~ a.button 不会因为选择所有兄弟姐妹之后,而不是之前选择所有兄弟姐妹.

a.button // this isn't targeted.
div.container.fullscreen
a.button // this is now targeted
a.button // so is this

遗憾的是,没有先前的兄弟选择器可以使用纯CSS实现您想要的功能.