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 Selectors 4草案规范中的! subject selector将是一种选择前一个元素的方法。它建议您不要将.one + .two { … }写入样式.two，而是可以将!.one + .two { … }写入样式.one。

但是，!目前尚未在任何浏览器中实施。 CSS选择器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。它们非常相似：+只会在另一个特定元素之后直接定位的元素，而~将定位出现在其后任何位置的兄弟。

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

2 个答案: