0

我正在尝试更多地了解 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元素。

4

2 回答 2

1

CSS Selectors 4 草稿规范中的!主题选择器将是一种选择前一个元素的方法。它建议您可以按风格写作，而不是.one + .two { … }按风格写作。.two!.one + .two { … }.one

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

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

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

于 2013-06-20T14:16:20.997 回答
0

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

作为一个简单的例子，看看这个 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 技巧文章。它们非常相似：+只针对直接在另一个特定元素之后的元素，而~将针对出现在它之后任何位置的同级元素。

于 2013-06-20T14:07:03.440 回答