css选择器

请问如何将同class的第一个元素选出来呢?

<!DOCTYPE html>
<html>
<head>
<style> 
.test:nth-of-type(1)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p class="test">第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p class="test">第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>

.test:nth-of-type(1) 以及 nth-of-child(1)都不行呢?
我想让第一个p.test 变红该怎么实现呢

阅读 1.7k
1 个回答

w3c对选择器的定义有几类包括: type, class, id等

h1标签的type是h1, p标签的type是p

w3c文档对nth-of-type的描述:

an element’s index among elements of the same type (tag name) in their sibling list。

所以:nth-of-type(1)的作用其实就是是: 匹配所有相同type的同胞元素集合中的第1个元素。


之前说题主使用错误,但其实是代码没有问题的

.test:nth-of-type(1)

正确的匹配逻辑应该是:

*:nth-of-type(1) 并且 这个匹配到的这个元素的class名必须包含`.test`

错误的匹配逻辑,导致问题产生的原因

将所有`.test`元素看作一个集合,匹配这个集合中第一个元素。

nth-of-child也是一样的逻辑, 如果不太了解可以看我下面提供的参考中第45个例子。

参考
w3c selector4草案
因为selector3的标准文档案例不够多, 所以看了4的草案。

推荐问题
宣传栏