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

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 id="VIDEO">VIDEO</h1>
</section>
<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (6)</h1>
</section>
<section class="featured module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO</h1>
</section>
<section class="featured module third-module">
  <h1 id="NOT-A-VIDEO">NOT A VIDEO (9)</h1>
</section>

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;
}

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!