[分享]css两个同样的标签选第一个

在CSS中，有时需要选取同样的标签中的第一个进行样式控制，这时候可以借助一些CSS选择器来实现，下面介绍两种实现方法。方法一：firstchild 使用:firstchild伪类可以选取同样标签中的第...

在CSS中，有时需要选取同样的标签中的第一个进行样式控制，这时候可以借助一些CSS选择器来实现，下面介绍两种实现方法。

方法一：first-child

使用:first-child伪类可以选取同样标签中的第一个元素。例如下面的CSS代码将选取第一个p标签，并设置其字体颜色为红色：

p:first-child {
  color: red;
} 

上述代码中，选择器p:first-child表示选取所有p标签中的第一个标签，这里将其字体颜色设置为红色。如果页面存在多个p标签，只有第一个p标签的字体颜色会被设置为红色。

方法二：nth-of-type(1)

使用:nth-of-type(1)选择器也可以选取同样标签中的第一个元素。例如下面的CSS代码将选取第一个p标签，并设置其背景颜色为绿色：

p:nth-of-type(1) {
  background-color: green;
} 

上述代码中，选择器p:nth-of-type(1)表示选取所有p标签中的第一个标签，这里将其背景颜色设置为绿色。如果页面存在多个p标签，只有第一个p标签的背景颜色会被设置为绿色。