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

概述拥有带有几个哈希链接的html代码(例如,href =“#login”)和使用伪选择器的css：用于动画的目标,例如 #login:target ~ #wrapper #console { -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-ani 拥有带有几个哈希链接的HTML代码(例如,href =“#login”)和使用伪选择器的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  ID="login"></a><div ID="wrapper">  <div ID="console" >...

在某处还有两个链接

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

和

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

都指向#login.是否可以修改CSS以使每个链接具有不同的行为？在我的情况下,纯HTML和CSS可以为两个链接做不同类型的动画吗？

解决方法 这是不可能的,正如您所要求的那样,因为CSS无法有条件地评估活动的来源,并且只能对最终结果做出“反应”,而无法引用行动的来源’导致’：目标选择器匹配.

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

<a ID="link_1" href="#hIDden">link One</a>    <a ID="link_2" href="#login">link Two</a>    <div ID="hIDden"></div>    <a  ID="login"></a>    <div ID="wrapper">        <div ID="console" >    </div>You can target differently:#hIDden:target + #login {    /* style,or trigger animation */}#login:target {    /* style,or trigger different animation */}

当然,问题在于,这显然不会直接导致：target选择器在两种情况下都匹配相关元素,因此答案必须保留,基本上：’不’,这是JavaScript可能是的情况只有满足您需求的真正解决方案.

总结

以上是内存溢出为你收集整理的html – CSS伪选择器：目标和触发源全部内容，希望文章能够帮你解决html – CSS伪选择器：目标和触发源所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。