Heim > Web-Frontend > CSS-Tutorial > Kann CSS „nth-of-type' auf Elemente mit einer bestimmten Klasse beschränkt werden?

Kann CSS „nth-of-type' auf Elemente mit einer bestimmten Klasse beschränkt werden?

Linda Hamilton
Freigeben: 2024-12-24 06:56:10
Original
552 Leute haben es durchsucht

Can CSS `nth-of-type` be Limited to Elements with a Specific Class?

CSS 3 nth-of-type auf eine bestimmte Klasse beschränken

Frage:

Gibt es eine Möglichkeit, den N-Typ-Selektor von CSS 3 so zu verfeinern, dass er nur auf Elemente innerhalb eines bestimmten Typs abzielt? Klasse?

Hintergrund:

Stellen Sie sich ein Szenario mit dynamischen Abschnitten mit unterschiedlichen Layouts vor, die durch unterschiedliche Klassen gekennzeichnet sind. Das Ziel besteht darin, jeden dritten Abschnitt mit der Klasse „.module“ hervorzuheben, ohne andere Elemente zu beeinträchtigen.

Lösung:

Leider gibt es dafür keine native Möglichkeit Erreichen Sie dies mit nth-of-type. Der Grund dafür ist, dass nth-of-class in CSS nicht unterstützt wird. Folglich ist es nicht möglich, nth-of-type auf eine Klasse zu beschränken.

Alternativ ist es notwendig, manuell eine neue Klasse, z. B. „.third-module“, zu jedem dritten Abschnitt mit dem hinzuzufügen Klasse „.module“. Diese benutzerdefinierte Klasse kann dann mithilfe von nth-of-type gezielt angesprochen werden.

HTML:

<section class="featured video">
  <h1>VIDEO</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (6)</h1>
</section>
<section class="featured module">
  <h1>NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1>NOT A VIDEO (9)</h1>
</section>
Nach dem Login kopieren

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module.third-module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}
Nach dem Login kopieren

Diese Lösung stellt sicher, dass nur die „.module“-Abschnitte mit der „.third-module“-Klasse das gewünschte Styling erhalten, da sie speziell auf sie abzielen n-ter Typ-Selektor.

Das obige ist der detaillierte Inhalt vonKann CSS „nth-of-type' auf Elemente mit einer bestimmten Klasse beschränkt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage