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僞選擇：目標和觸發源

回答

相關問題