Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > CSS3的:not(:target)效果_html/css_WEB-ITnose

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

WBOY
Freigeben： 2016-06-21 09:08:58
Original
1424 Leute haben es durchsucht

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>
Nach dem Login kopieren


CSS:

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



进入页面的时候，就会执行li:not(:target)，效果在三个li都可用


一旦点击激活target，li:not(:target)就意味着上一个激活的target：

首先点击a，激活target，li:not(:target)无效果

再点b，在第一个li处出现效果

是不是有点坑，呵呵哒。

他的用处就是在手动图片轮播的时候改变z-index的最佳利器！

Verwandte Etiketten：
CSS3的:not(:target)效果
Quelle：php.cn
Vorheriger Artikel：网页学习（部分）CSS_html/css_WEB-ITnose Nächster Artikel：使用 Emmet 生成 HTML 的语法详解_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2166
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2315
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1950
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1829
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1880
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage