css - CSS :selector doesn't work with different tags?

Question

Say I have

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

If I use

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

Then all three tags get the CSS code since they are all of different types. Is there a way of still using this selector but with different tags?

Answer 1

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

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

Answer 2

来自文档：

伪类:first-of-type

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

句法

selector:first-of-type{ properties }

Answer 3

演示

first-of-type 选择作为它的类型，但是您已经为每个孩子定义了不同的类型。在我提供的演示中，添加了另外两个 div (of-type)，其中第一个 div 被选中，另一个 (of-type) 是 span，它只是一个，所以它选择如果你添加更多 span 然后它不会t 选择其他跨度。

在您的情况下，如果您只想先选择然后申请:first-child

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

取自 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>

结果：

这个跨度是第一！这个跨度不是。:( 这个嵌套元素呢？这是另一种类型可悲的是，这不是...