Verwendung: Pseudoklassenselektor n-ter Typ (3n+1) zum Auswählen von CSS-Stilen von Elementen desselben Typs, deren Positionen die 3n+1-Bedingung erfüllen

So verwenden Sie den Pseudoklassenselektor nth-of-type(3n+1), um den CSS-Stil von Elementen desselben Typs auszuwählen, deren Position die 3n+1-Bedingung erfüllt. Es sind spezifische Codebeispiele erforderlich CSS müssen wir oft verschiedene Stile auf Elemente an bestimmten Positionen anwenden. Der Pseudoklassenselektor :nth-of-type(3n+1) bietet eine praktische Möglichkeit, Positionen unter Elementen desselben Typs auszuwählen, die die 3n+1-Bedingung erfüllen, und Stile auf sie anzuwenden. Das Funktionsprinzip des Selektors

:nth-of-type(3n+1) besteht darin, dass er Elemente desselben Typs auswählt, die die Position von 3n+1 erfüllen. Unter diesen stellt n eine ganze Zahl dar und 3n+1 stellt die Position dar, die die Bedingungen erfüllt, z. B. 1, 4, 7 usw.

Als nächstes werden wir anhand spezifischer Codebeispiele veranschaulichen, wie der :nth-of-type(3n+1)-Selektor verwendet wird.

Zuerst benötigen wir eine Reihe von HTML-Elementen desselben Typs. Nehmen wir als Beispiel eine ungeordnete Liste:

<ul>
  <li>第1个元素</li>
  <li>第2个元素</li>
  <li>第3个元素</li>
  <li>第4个元素</li>
  <li>第5个元素</li>
  <li>第6个元素</li>
  <li>第7个元素</li>
  <li>第8个元素</li>
  <li>第9个元素</li>
  <li>第10个元素</li>
</ul>

Als nächstes wollen wir Stile auf Elemente anwenden, die die 3n+1-Bedingung erfüllen (also die Positionen 1, 4, 7 usw.). Wir können den Selektor :nth-of-type(3n+1) verwenden, um diese Aufgabe zu erfüllen. Beispielsweise möchten wir die Hintergrundfarbe dieser Elemente auf Rot und die Schriftfarbe auf Weiß setzen. Der Code lautet wie folgt:

li:nth-of-type(3n+1) {
  background-color: red;
  color: white;
}

Fügen Sie den obigen Code zur CSS-Datei hinzu und verknüpfen Sie die CSS-Datei mit der HTML-Datei. Öffnen Sie den Browser und sehen Sie sich die Seite an. Sie werden sehen, dass der entsprechende Stil auf Elemente an Positionen angewendet wurde, die die 3n+1-Bedingung erfüllen.

Ich hoffe, dass Sie durch die obigen Codebeispiele und Erklärungen verstanden haben, wie Sie den Pseudoklassenselektor :nth-of-type(3n+1) verwenden, um Elemente desselben Typs auszuwählen, deren Positionen die 3n+1-Bedingung erfüllen und wenden Sie CSS-Stile darauf an. Diese Technik wird häufig in tatsächlichen Projekten verwendet und ich hoffe, dass sie Ihnen hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonVerwendung: Pseudoklassenselektor n-ter Typ (3n+1) zum Auswählen von CSS-Stilen von Elementen desselben Typs, deren Positionen die 3n+1-Bedingung erfüllen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!