Question

如何使用CSS查找给定类型的第一个元素？

我在尝试：

a:first-of-type { }

和

a:nth-of-type(1) { }

但他们也在选择儿童元素。我只需要在整个页面中选择第一个<a>标记。

Answer 1

在CSS中无法做到一般情况。只有JS / jQuery允许或准确了解给定页面中HTML的结构。

为什么？
元素无法知道，在其祖先之一的前一个兄弟中，是否存在“前面的”a元素。因为没有，也没有父选择器。

<body>
  <p>
    <a href="#"><!-- the one you'd want to select -->
  </p>
  <a href="#"><!-- this one knows he is the first of his type in the pool of direct descendant (children) of body
                   but no more can be achieved (in CSS) -->
</body>

在纯CSS中，您可以为给定级别选择其各自父级的每个第一类元素，例如：

body > * > * > a:first-of-type { /* level 3, great-grandchildren of body */ }

这几乎是所有

的总和

Answer 2

a:first-child{
  // your styles.
}

将上面的代码与主选择器容器前缀一起使用到此类。

假设在这里你首先需要一个包含整个HTML页面的标签，然后再写

body a:first-child{
      // your styles.
}

CSS选择第一个元素类型

2 个答案: