Detailed explanation of examples of only-child and only-of-type in CSS3 selectors

only-child selector

The ":only-child" selector selects only one child element in the parent element, and only one child element. In other words, there is only one child element in the parent element of the matching element, and it is a only child element.

Example Demonstration

Use the ":only-child" selector to control the background style of only one child element. For a better understanding, we use this example Demonstrate to everyone through comparison.

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

##only-of-type selector

":only- of-type”The selector is used to select an element that is the only child element of the same type as its parent element. This may not be easy to understand, let’s put it another way. ":only-of-type" means that an element has many sub-elements, and only one type of sub-element is unique. Use the ":only-of-type" selector. Selects the only type child element in this element.

Example demonstration

Use the ":only-of-type" selector to modify the background color of only one p element in the container to orange.

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

The above is the detailed content of Detailed explanation of examples of only-child and only-of-type in CSS3 selectors. For more information, please follow other related articles on the PHP Chinese website!