请问如何将同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 变红该怎么实现呢
w3c
对选择器的定义有几类包括: type, class, id等h1标签的type是h1, p标签的type是p
w3c文档对
nth-of-type
的描述:所以
:nth-of-type(1)
的作用其实就是是: 匹配所有相同type的同胞元素集合中的第1个元素。之前说题主使用错误,但其实是代码没有问题的
但
.test:nth-of-type(1)
正确的匹配逻辑应该是:
错误的匹配逻辑,导致问题产生的原因
nth-of-child也是一样的逻辑, 如果不太了解可以看我下面提供的参考中第45个例子。
参考
w3c selector4草案
因为selector3的标准文档案例不够多, 所以看了4的草案。