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

具有带有多个散列链接的

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

我想根据触发器事件的“source”添加一个条件行为特性

让我们用

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

...

还有两个链接

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

及

---

都指向

#登录

。是否可以修改

css

以使每个链接具有不同的行为？在我的例子中，纯

html

和

css

是否可以为两个链接制作不同类型的动画？

否。

：target

是其类型中唯一的css选择器；对于任何其他“行为”，您需要JavaScript或服务器端的东西

---

你能得到的最接近的是

#login1

和

#login2

正如你所问，这是不可能的，因为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可能是满足您需要的唯一真正解决方案。

就像[href=“#login”]{…}？@kunalbhat-两个链接都有

href=“#login”

啊，好的，我现在看到了。理解这个问题有点困难。因此，您正在尝试根据是否单击了“链接”1或“链接”2来更改“登录”元素上的动画？@BarbaraLaird-是的，正确。在上面的代码示例中，具有

id

#控制台的元素正在设置动画，但我想根据触发事件的源执行不同的css代码（动画），因此如果用户单击具有

id

#link#1的链接，它将执行动画#1，如果用户单击具有

id

#link#2的链接，它将执行动画#2。

    <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 */
}