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;
    }
}

所以这个例子允许我在hover元素之后给元素一个过渡。但我的问题是，有没有可能反过来呢?在悬停元素之前定位元素?在本例中，bg_2元素

Answer 1

CSS选择器4草案规范中的!主题选择器将是选择前一个元素的方法。它建议将.one + .two { … }写入.two样式，而可以将!.one + .two { … }写入.one样式。

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

由于你不能使用!，目前没有办法选择你想要的纯CSS。

请参阅关于没有父选择器的答案，它链接到CSS规范，在那里您可以找到所有已定义的选择器。

Answer 2

目前仅靠CSS还不能达到你想要的效果。我们有同胞选择器(+和~)，但是目标元素必须在第一个元素之后。

作为一个简单的例子，看看这个小提琴。给定这个标记:

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

和这个CSS:

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

你可能期望.one最终是绿色的，.two是红色的。实际上，只有.two接收到背景色，因为第二行试图样式化DOM中较早出现的元素。

* +为相邻兄弟组合子，~为一般兄弟组合子。有关详细信息，请参阅这篇CSS技巧文章。它们非常相似:+将只针对直接位于另一个特定元素之后的元素，而~将针对出现在它之后的任何地方的兄弟元素。