html - 如何为某种元素的第一个 child 设计样式？

Question

例如，我有这样的 HTML:

<div class='page'>
    <span>2</span>
    <span>2</span>
    <a>1</a>
    <a>6</a>
</div>

我如何为第一个 child 设计样式

我是这样使用的:.page a:first-child {color:red}

但它没有运行。

Answer 1

使用 first-of-type 而不是 first-child

.page a:first-of-type{
    color:red;
}

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

取自MDN Documentation .您可以找到更多详细信息和示例 here.

解释::first-child not working as expected