结构伪类选择器

最新推荐文章于 2025-05-27 18:19:13 发布

Tom10097

最新推荐文章于 2025-05-27 18:19:13 发布

阅读量76

点赞数

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/m0_49288919/article/details/119143692

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

-child

（元素名可选）

元素名:first-child
元素名:last-child

元素名:nth-child(n) 从第n个开始
结果=0,1,2,3,4,5……
元素名:nth-child(n+5) 从第n个开始
结果=5,6,7,8,9……
元素名:nth-child(-n+5) 从第五个开始
结果=5,4,3,2,1

元素名:nth-child(odd) 选择奇数项
元素名:nth-child(2n+1)

元素名:nth-child(even) 选择偶数项
元素名:nth-child(2n)

-of-type

元素名:first-of-type
元素名:last-of-type
元素名:nth-of-type(n)

div span:nth-child(1){

}

div span:nth-of-type(1){

}
-------
<div>
<p></p>
<span></span>
</div>

div span:nth-child(1)因第一个不是span，所以不生效
div span:nth-of-type(1)会去找指定类型的第一个span

思考

当nth-of-type不指定限定元素名的时候，会发生什么？

比如下面代码
html会生效
head会生效，虽然没有作用
style,body,h1都会生效
以及第一个p标签

<html>
<head>
<style> 
:first-of-type
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body></html>