CSS3 선택기의 외동 및 유일한 유형의 예에 대한 자세한 설명

only-child 선택기

":only-child" 선택기는 상위 요소에서 하나의 하위 요소와 하나의 하위 요소만 선택합니다. 즉, 일치하는 요소의 상위 요소에는 하위 요소가 하나만 있으며 :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" 선택기를 사용하세요. 더 나은 이해를 위해 비교를 통해 예제를 보여드리겠습니다.

HTML 코드:

<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 코드:

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

데모 결과:

🎜only-of-type 선택기🎜🎜":only-of-type" 선택 선택기는 상위 요소와 동일한 유형의 유일한 하위 요소인 요소를 선택하는 데 사용됩니다. 이해하기 쉽지 않을 수도 있습니다. 다른 방식으로 설명하겠습니다. ":only-of-type"은 요소에 여러 하위 요소가 있고 한 가지 유형의 하위 요소만 고유하다는 의미입니다. 선택기는 이 요소에서 유일한 유형 하위 요소를 선택할 수 있습니다. 🎜🎜🎜예제 데모🎜🎜🎜":only-of-type" 선택기를 사용하여 컨테이너에 있는 단 하나의 p 요소의 배경색을 주황색으로 수정합니다. 🎜🎜🎜HTML 코드: 🎜🎜🎜🎜🎜rrreee🎜🎜CSS 코드: 🎜🎜🎜🎜🎜rrreee🎜🎜데모 결과: 🎜🎜🎜🎜🎜

위 내용은 CSS3 선택기의 외동 및 유일한 유형의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!