CSS 中的 First Of Class

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

CSS 中的 First Of Class

作者：迹忆客最近更新：2023/04/27 浏览次数：

CSS :first-of-type 选择器用于在一组元素中选择其类型的第一个元素。例如，如果您有一组段落，则 :first-of-type 选择器将选择该组中的第一个段落。

此选择器通常与其他选择器（例如子选择器）结合使用来选择特定元素。例如，以下代码将选择页面上第一个 div 元素中的第一段：

div:first-child > p:first-of-type {
  /* CSS code */
}

什么是 CSS First of Class

CSS 选择器选择您想要设置样式的元素。

最基本的选择器是元素选择器，它用于通过标签名称选择元素。例如，元素选择器 p 将选择页面上的所有

元素。

类选择器用于通过类名选择元素。例如，类选择器 .example 将选择所有带有类 example 的元素。

id 选择器用于通过 id 选择元素。例如，id 选择器 #example 将选择 id = "example" 的元素。

要使用类示例选择第一部分，您可以使用 CSS 选择器示例：first。

具有类选择器的第一个元素用于选择具有指定类的第一个元素。例如，如果你想用类测试来设置第一个 <p> 元素的样式，你可以使用类选择器这样的第一个元素。

p.test:first-child {

当您想要为具有特定类的第一个元素设置不同于具有该类的其他元素的样式时，具有类选择器的第一个元素是有益的。这通常用于将列表中的第一个元素设置为不同于其他列表项的样式。

示例代码：

<head>
   <style>
      p:first-child {
      color: lime;
      background-color: black;
      padding: 5px;
      }
   </style>
</head>
<body>
   <div>
      <p>This text is selected!</p>
      <p>This text isn't selected.</p>
   </div>
   <div>
      <h2>This text isn't selected: it's not a `p`.</h2>
      <p>This text isn't selected.</p>
   </div>
</body>

实现一流的 CSS

您可以通过几种不同的方式实现一流的 CSS。

最常见的方法是简单地将 CSS 代码放在 HTML 文档中的任何其他代码之前。这将确保首先解析 CSS 代码，并将优先于任何其他代码。

另一种优先实现 CSS 的方法是使用外部 CSS 文件。

使用 CSS 时，首先要做的是选择要设置样式的元素。您可以使用元素的 ID、类或标签。

选择元素后，您可以使用 CSS 属性为其设置样式。例如，您可以使用 color 属性更改元素的颜色或使用 font-size 属性更改元素字体的大小。

示例代码：

<html>
    <head>
        <style>
            p:first-of-type {
                background: red;
            }
        </style>
    </head>
    <body>
        <p>The first paragraph</p>
        <p>The second paragraph</p>
        <p>The third paragraph</p>
        <p>The fourth paragraph</p>
    </body>
</html>