Detaillierte Erläuterung von Beispielen für „Only-Child' und „Only-of-Type' in CSS3-Selektoren

Nur-Kind-Selektor

Der „:only-child“-Selektor wählt nur ein untergeordnetes Element im übergeordneten Element und nur ein untergeordnetes Element aus. Mit anderen Worten: Das übereinstimmende Element hat nur ein untergeordnetes Element in seinem übergeordneten Element und es ist ein eindeutiges untergeordnetes Element .

Beispieldemonstration

Verwenden Sie den „:only-child“-Selektor, um den Hintergrundstil nur eines untergeordneten Elements zu steuern. Zum besseren Verständnis verwenden wir diese Beispieldemonstration für alle durch Vergleich.

HTML-Code:

<p class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p></p><p class="post">
  <p>我是一个段落</p></p>

CSS-Code:

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}.post p:only-child {
  background: orange;
}

Demo-Ergebnisse:

Nur-Typ-Selektor

“:only-of-type” A Der Selektor wird verwendet, um ein Element auszuwählen, das das einzige untergeordnete Element desselben Typs wie sein übergeordnetes Element ist. Das ist vielleicht nicht leicht zu verstehen, sagen wir es anders. “:only-of-type” bedeutet, dass ein Element viele Unterelemente hat und nur ein Unterelementtyp eindeutig ist. Verwenden Sie den Selektor „:only-of-type“, um das einzige Unterelement dieses Typs auszuwählen.

Beispieldemonstration

Verwenden Sie den Selektor „:only-of-type“, um die Hintergrundfarbe nur eines p-Elements im Container in Orange zu ändern.

HTML-Code:

<p class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个p元素</p></p><p class="wrapper">
  <p>我是一个p</p>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p></p>

CSS-Code:

.wrapper > p:only-of-type {
  background: orange;
}

Demo-Ergebnisse:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für „Only-Child' und „Only-of-Type' in CSS3-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!