CSS伪选择：目标和触发源

有html代码使用伪选择:target动画几个散列链接（例如href="#login"）和CSS等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为两个链接做不同类型的动画？

来源

2013-10-01 Ωmega

像[href =“＃login”] {...}？ – kunalbhat

@kunalbhat - 两个链接都有'href =“＃login”' –

啊，是的，好的，现在我明白了。理解这个问题有点麻烦。 – kunalbhat

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

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

来源

2013-10-01 23:19:25 Ryan

这是不可能的，因为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可能是满足您需求的唯一真正解决方案的情况。

来源

2013-10-01 23:22:42

CSS伪选择：目标和触发源

回答

相关问题