CSS3セレクターのonly-childとonly-of-typeの例の詳細な説明-CSSチュートリアル-php.cn

CSS3セレクターのonly-childとonly-of-typeの例の詳細な説明

黄舟

リリース： 2017-07-26 14:30:48

オリジナル

3152 人が閲覧しました

only-child セレクター

「:only-child」セレクターは、親要素内の子要素を 1 つだけ選択し、子要素を 1 つだけ選択します。つまり、一致する要素の親要素内に子要素は 1 つだけあり、それは :only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

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

ログイン後にコピー

CSS代码：

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

ログイン後にコピー

演示结果：

only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”唯一の子要素

です。

サンプルデモンストレーション

「:only-child」セレクターを使用して、1 つの子要素のみの背景スタイルを制御します。よりよく理解するために、この例を比較しながら示します。

htmlコード：

rreeecssコード：

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

ログイン後にコピー

demo結果：

🎜only-of-type セレクター🎜🎜":only-of-type" の選択selector は、親要素と同じ型の唯一の子要素である要素を選択するために使用されます。これは理解しにくいかもしれませんが、別の言い方をしましょう。 ":only-of-type" は、要素に多数のサブ要素があり、一意のサブ要素は 1 つのタイプのみであることを意味します。「:only-of-type」を使用します。 selector は、この要素内の type サブ要素のみを選択できます。 🎜🎜🎜デモ例🎜🎜🎜「:only-of-type」セレクターを使用して、コンテナー内の 1 つの p 要素のみの背景色をオレンジ色に変更します。 🎜🎜🎜HTML コード: 🎜🎜🎜🎜🎜

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

ログイン後にコピー

🎜🎜 CSS コード: 🎜🎜🎜🎜🎜rrreee🎜🎜 デモ結果: 🎜🎜🎜🎜🎜

以上がCSS3セレクターのonly-childとonly-of-typeの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。