CSS3:not(:target) 効果_html/css_WEB-ITnose

HTML:

<div>	<ul>		<li id='li1'>1</li>		<li id='li2'>2</li>		<li id='li3'>3</li>	</ul>	<a href='#li1'>a</a>	<a href='#li2'>b</a>	<a href='#li3'>c</a></div>

CSS:

@keyframes act{	0%{background:red};	100%{background:white};}li:not(:target){	animation:act 1s ease-in;}

ページに入ると li:not が実行されます(:target)、効果は 3 つありますli すべて利用可能

クリックしてターゲットをアクティブ化すると、li:not(:target) は最後にアクティブ化されたターゲットを意味します:

まず a をクリックしてターゲットをアクティブ化します。li:not(:target) )には何もありません エフェクト

もう一度bをクリックすると、最初のliにエフェクトが表示されます

ちょっとわかりにくいですね、ははは。

その使用は、手動画像回転中に Z インデックスを変更するための最良のツールです。