css - 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将针对aif 那是 的下一个直接兄弟，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 实现您想要的。

Answer 2

E + F语法仅匹配Eif befores F。如果它们像您刚才描述的那样被订购，我认为您不能a使用纯 CSS 设置样式。

您可以简单地更改 HTML 以将fullscreen类放在 和 的父容器container上button。这样，您可以使用以下声明来设置样式：

.fullscreen > div.container {
  /* 
    any fullscreen modifications to be done, what used to be in div.fullscreen
  */
}

.fullscreen > a.button {
  display: none
}

Answer 3

缺少你真正的 html。<a>有href属性吗？是针对<div>吗？

如果按钮完全展开后隐藏在 div 下，则不必隐藏，它被 div 本身隐藏。

表单元素可以帮助查看想法：http: //codepen.io/gcyrillus/pen/otFim