Question

将html代码与多个哈希链接（例如href="#login"）和css使用伪选择器:target进行动画处理，例如

#login:target ~ #wrapper #console {
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    animation-name: scaleOut;
}

我想根据触发事件的“source”添加条件行为的功能。

让我们说html代码

<a class="hidden" id="login"></a>
<div id="wrapper">
  <div id="console" class="animate">
...

还有两个链接

<a id="link_1" href="#login">

和

<a id="link_2" href="#login">

都指向#login。是否可以修改css以使每个链接具有不同的行为？在我的情况下，纯html和css是否可以为两个链接执行不同类型的动画？

Answer 1

这是不可能的，正如您所要求的那样，因为CSS无法有条件地评估活动的来源，并且只能对最终结果做出“反应”，而无法引用来源“导致”:target选择器匹配的操作。

也就是说，如果您能够更改HTML和其中一个链接，则可以近似显示：

    <a id="link_1" href="#hidden">Link One</a>

    <a id="link_2" href="#login">Link Two</a>

    <div id="hidden"></div>
    <a class="hidden" id="login"></a>

    <div id="wrapper">
        <div id="console" class="animate">
    </div>

You can target differently:

#hidden:target + #login {
    /* style, or trigger animation */
}

#login:target {
    /* style, or trigger different animation */
}

问题当然是，这显然不会直接导致:target选择器在两种情况下都匹配相关元素，所以答案必须保留，基本上：'不'，这是一个案例其中JavaScript可能是满足您需求的唯一真正解决方案。

Answer 2

没有。 :target是其类型中唯一的CSS选择器;对于任何其他“行为”，您需要JavaScript或服务器端的东西。

您可以获得的距离最近的是#login1和#login2。

CSS伪选择器：目标和触发源

2 个答案: