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

! subject selector在 CSS Selectors 4 规范草案中，这将是一种选择前一个元素的方法。它建议不要写 .one + .two { … }风格.two , 你可以写 !.one + .two { … }风格.one .

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

因为你不能使用 ! ，目前还没有办法用纯 CSS 来选择你想要的。

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