html - CSS 伪选择器 :target and trigger source

Question

有 html 代码和几个哈希链接(例如 href="#login")和使用伪选择器 :target 的 css 动画，比如

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

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

假设 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

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

最接近的是 #login1 和 #login2。