Use the :first-of-type pseudo-class selector to select the style of the first element of the same type

The first-of-type pseudo-class selector in CSS can be used to select and style the first element of the same type. This selector can be used for multiple tag elements, such as p, div, span, etc.

The following is a specific sample code:

HTML code:

<div class="container">
  <h1>标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2>标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

CSS code:

p:first-of-type {
  font-weight: bold;
}

In the above code, we selected the A p tag element and set it to bold. The result will be displayed in the browser, and the first paragraph of text will be set to bold.

Similarly, we can also use the first-of-type selector to select the first of other tag elements. For example:

h1:first-of-type {
  font-size: 24px;
}

Here we select the first h1 tag element and set its font size to 24 pixels.

It should be noted that using the first-of-type selector can only select the first element of the same type of element. If we want to select the first element among different types of elements, we can use :first-child.

In short, using the first-of-type pseudo-class selector can very conveniently set a specific style for the first element of the same type.

The above is the detailed content of Use the :first-of-type pseudo-class selector to select the style of the first element of the same type. For more information, please follow other related articles on the PHP Chinese website!