demo

Question

说我有

<div class="myClass">
   <div class="child"></div>
   <span class="child"></span>
   <a class="child"></a>
</div>

如果我使用

.child:first-of-type { /* Code here */ }

然后所有三个标签都获得CSS代码，因为它们都是不同的类型。有没有办法仍然使用这个选择器，但有不同的标签？

Answer 1

只需将标签添加到选择器，例如

div.child:first-of-type { /* Code here */ }

Answer 2

From docs:

伪班:first-of-type

:first-of-type伪类表示一个元素，该元素是其父元素子元素列表中其类型的第一个兄弟。与:nth-of-type(1)相同。

<强>语法

selector:first-of-type{ properties }

Answer 3

demo

first-of-type选择其类型，但您已为每个具有不同类型的子项定义。在我提供的演示中，还添加了两个div（of-type），其中第一个div被选中，另一个（of-type）是span，只有一个，所以如果你添加更多的span它就会选择它而不是t选择其他跨度。

在您的情况下，如果您只想先选择，请应用:first-child

：first-of-type CSS伪类在其父元素的子元素列表中表示其类型的第一个兄弟。 source

从MDN获取的示例提供上述来源

div :first-of-type {
  /*background-color: lime;*/
  font-weight: bold;
}


<div>
  <span>This span is first!</span>
  <span>This span is not. :(</span>
  <span>what about this <em>nested element</em>?</span>
  <strike>This is another type</strike>
  <span>Sadly, this one is not...</span>
</div>

结果：

这个范围是第一个！这个范围不是。 :(这个嵌套元素怎么样？这是另一种类型可悲的是，这个不是......

CSS：选择器不适用于不同的标签？

3 个答案:

demo