简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

css学习选择器之:nth-child(n)_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:38:07
Original
1253 Leute haben es durchsucht

今天新学习了一个小效果，网站比如说实现间行颜色变化，比如说一行黑，一行白，好吧，斑马就出现了，当你鼠标触碰某一行，颜色背景变化，尤其是当你连接数据库时，简单的代码就显得很重要了.

这时候一个有意思的朋友出现了，:nth-child(n)  一直在那蹦?着说“找我呀”，这个是说选择器匹配属于其父元素的第N个子元素，从0开始，比如说p:nth-child(2)指下标为2的p元素，就是第3个元素；然后如果想实现奇偶行不同，奇数可以直接用odd，偶数直接用even，方便，如果用（2n+1），（2n）也OK的;

.history-content:nth-child(2n+1) {	background: #D8F0E7;}.history-content:nth-child(2n) {	background: #eee;}.history-content:hover {	background: #fff;}
Nach dem Login kopieren

跟下面效果是一样一样的： 

.history-content:nth-child(odd) {	background: #D8F0E7;}.history-content:nth-child(even) {	background: #eee;}.history-content:hover {	background: #fff;}
Nach dem Login kopieren
最后效果是这样的，一行灰色，一行绿色，触碰成白色


菜鸟学习，如有更好的，敬请交流！哈

版权声明：本文为博主原创文章，未经博主允许不得转载。

Verwandte Etiketten：
css学习选择器之:nth-child(n)
Quelle：php.cn
Vorheriger Artikel：css动画结束后 js无法修改translated值 ._html/css_WEB-ITnose Nächster Artikel：CSS3 transition-timing-function_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
2
1774
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
10
1917
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
1629
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
1540
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1575
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！