CSS3 过渡，悬停元素之前的目标元素

Question

我正在尝试更多地了解 CSS3 过渡和“很酷的东西”。所以我的网站上有一些漂亮的动画，我做了一些谷歌研究，对我有很大帮助。

我想选择悬停元素之外的元素。我发现使用+ 符号可以定位悬停元素之后的元素。一个小例子（LESS）：

header{
    display: inline-block;
    div#bg_2{
        color:#000;
    }
    div#container{
        float:left;
        &:hover{            
            & + nav {
                ul{
                    opacity: 0;
                }
                li{ 
                    .transition(1200ms, ease-in-out); 
                    margin-left:-100px;
                }
            }
        }

    }
    nav{
        height:30px;
    }
}

所以这个例子允许我在悬停元素之后给元素一个过渡。但我的问题是，是否有可能做相反的事情？在悬停元素之前定位元素？在示例中，bg_2 元素。

Answer 1

CSS 选择器 4 草案规范中的 ! subject selector 将是一种选择前一个元素的方法。它建议不要将.one + .two { … } 写成.two，而是将!.one + .two { … } 写成.one。

但是，! 目前没有在任何浏览器中实现。而且 CSS Selectors 4 规范仍然可以更改，因为它是一个草案。此外，该规范目前将 ! 主题选择器标记为“完整”profile，这意味着 JavaScript 使用，但 不是在“快速”配置文件中，它是 CSS必须使用。

由于您不能使用!，目前无法使用纯 CSS 选择您想要的内容。

另请参阅 this answer about there being no parent selector，它链接到 CSS 规范，您可以在其中找到所有已定义的选择器。

Answer 2

目前仅靠 CSS 无法实现您所追求的。我们有同级选择器（+ 和 ~），但目标元素必须在第一个元素之后。*

举个简单的例子，看看this fiddle。鉴于此标记：

<p class="one">One</p>
<p class="two">Two</p>

还有这个 CSS：

.one ~ .two { background: red; }
.two ~ .one { background: green; }

您可能希望.one 以绿色结束，.two 以红色结束。实际上，只有.two 接收背景颜色，因为第二行试图设置 DOM 中较早出现的元素的样式。

* + 是相邻的兄弟组合器，~ 是一般的兄弟组合器。有关详细信息，请参阅此CSS Tricks article。它们非常相似：+ 将只针对直接在另一个特定元素之后的元素，而~ 将针对出现在它之后任何位置的同级元素。