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

【问题标题】：CSS pseudo selector :target and trigger sourceCSS 伪选择器：目标和触发源
【发布时间】：2013-10-08 06:19:13
【问题描述】：

拥有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 是否可以为两个链接制作不同类型的动画？

【问题讨论】：

喜欢 [href="#login"] { ... } ?
@kunalbhat - 两个链接都有href="#login"
啊，是的，好的，我现在明白了。理解问题有点困难。
那么，您尝试根据是否点击了#link_1 或#link_2 来更改#login 元素上的动画？
@BarbaraLaird - 是的，正确。在上面的代码示例中，带有id #console 的元素正在动画化，但我想根据触发事件的来源做不同的css代码（动画），所以如果用户点击带有id #link_1的链接，它会做动画#1，如果用户点击id#link_2的链接，它会做动画#2。

标签： html css css-selectors

【解决方案1】：

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

你能得到的最接近的是#login1和#login2。

【讨论】：

【解决方案2】：

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

【讨论】：