Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial 关于CSS3 :nth-child() 选择器_html/css_WEB-ITnose

关于CSS3 :nth-child() 选择器_html/css_WEB-ITnose

Jun 24, 2016 am 11:57 AM
css3 nth-child 选择器

一个有很多个小方块的页面,大方块的class为big,小方块的class为small,用css3选择器这么写:

.small:nth-child(even){margin-right:0;}
Nach dem Login kopieren


设置第偶数个小方块的margin-right为0,但是第三个小方块的margin-right却等于0了,怎么回事呢?

demo:http://guusoft.com/test/


回复讨论(解决方案)

通过其他网友的指点,明白了从父元素中选择第奇数或者偶数个子元素并不会特指某种类型(.small),而是将所有子元素都计算进去的。
所以最后的解决方法是:

$(".small:odd").addClass("last");
Nach dem Login kopieren

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie Spitzenränder in CSS3 So implementieren Sie Spitzenränder in CSS3 Sep 16, 2022 pm 07:11 PM

In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".

Was ist die Kennung des ID-Selektors in CSS? Was ist die Kennung des ID-Selektors in CSS? Sep 22, 2022 pm 03:57 PM

In CSS ist die Kennung des ID-Selektors „#“. Sie können einen bestimmten Stil für das HTML-Element angeben, das mit einem bestimmten ID-Attributwert markiert ist. Die Syntaxstruktur ist „#ID-Wert {Attribut: Attributwert;}“. Das ID-Attribut ist auf der gesamten Seite eindeutig und nicht wiederholbar; der ID-Attributwert sollte nicht mit einer Zahl beginnen. IDs, die mit Zahlen beginnen, funktionieren in Mozilla/Firefox-Browsern nicht.

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Nov 20, 2023 am 11:20 AM

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist. Das spezifische Codebeispiel lautet wie folgt: HTML-Code: <divid="container" ><divclass="item"&gt ;Erstes untergeordnetes Element</div><divclass="item"&

Was tun, wenn der Javascript-Selektor fehlschlägt? Was tun, wenn der Javascript-Selektor fehlschlägt? Feb 10, 2023 am 10:15 AM

Der JavaScript-Selektor schlägt fehl, weil der Code nicht standardisiert ist. Die Lösung ist: 1. Entfernen Sie den importierten JS-Code und die ID-Selektormethode wird wirksam. 2. Führen Sie einfach den angegebenen JS-Code ein, bevor Sie „jquery.js“ einführen.

Lernen Sie neue CSS-Funktionen kennen: Directional Clipping overflow:clip Lernen Sie neue CSS-Funktionen kennen: Directional Clipping overflow:clip Oct 11, 2022 pm 07:12 PM

In diesem Artikel wird ab Chrome 90 eine neue Funktion vorgestellt, die zum Überlauf hinzugefügt wurde: Überlauf. Verwenden Sie diese Funktion, um die Überlaufrichtung einfach zu steuern.

Was ist n-tes Kind? Was ist n-tes Kind? Aug 04, 2023 am 11:00 AM

Der „n-te-Kind“-Selektor bietet Entwicklern eine präzisere und flexiblere Möglichkeit, Elemente auszuwählen und zu formatieren. Durch die richtige Verwendung des „n-ten-Kind“-Selektors können wir verschiedene Elemente mit bestimmten Positionen einfach auswählen und formatieren, wodurch unser Seitendesign reichhaltiger und vielfältiger wird.

Eingehende Analyse von Is- und Where-Selektoren: Verbesserung des CSS-Programmierniveaus Eingehende Analyse von Is- und Where-Selektoren: Verbesserung des CSS-Programmierniveaus Sep 08, 2023 pm 08:22 PM

Eingehende Analyse von Ist- und Wo-Selektoren: Verbesserung des Niveaus der CSS-Programmierung Einführung: Im Prozess der CSS-Programmierung sind Selektoren ein wesentliches Element. Sie ermöglichen es uns, Elemente in einem HTML-Dokument basierend auf bestimmten Kriterien auszuwählen und zu formatieren. In diesem Artikel werden wir uns eingehend mit zwei häufig verwendeten Selektoren befassen, nämlich dem Is-Selektor und dem Where-Selektor. Durch das Verständnis ihrer Arbeitsprinzipien und Nutzungsszenarien können wir das Niveau der CSS-Programmierung erheblich verbessern. 1. Der Selektor ist eine sehr mächtige Wahl

Erfahren Sie in einem Artikel mehr über die von lxml unterstützten Selektoren Erfahren Sie in einem Artikel mehr über die von lxml unterstützten Selektoren Jan 13, 2024 pm 02:08 PM

lxml ist eine leistungsstarke Python-Bibliothek zur Verarbeitung von XML- und HTML-Dokumenten. Als Parsing-Tool bietet es eine Vielzahl von Selektoren, mit denen Benutzer die erforderlichen Daten einfach aus Dokumenten extrahieren können. In diesem Artikel werden die von lxml unterstützten Selektoren ausführlich vorgestellt. lxml unterstützt die folgenden Selektoren: Tag-Selektor (ElementTagSelector): Wählen Sie Elemente nach Tag-Namen aus. Wählen Sie beispielsweise Elemente mit einem bestimmten Tag-Namen aus, indem Sie <tagname> verwenden

See all articles