css选择器之-of-type 以及nth- 补充

最新推荐文章于 2024-03-05 14:35:41 发布

可乐少点冰

最新推荐文章于 2024-03-05 14:35:41 发布

阅读量705

点赞数

分类专栏：前端 # 样式Css 文章标签： Css3 选择器

本文链接：https://blog.csdn.net/a8725585/article/details/78485608

版权

前端同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

样式Css

9 篇文章 0 订阅

订阅专栏

-of-type 限制类型

p:first-of-type;
p:nth-of-type(n);

如上计算时只计算p标签不是p标签的不计算在内

p:first-of-type
{
background:#ff0000;
}

p:first-child
{
background:#ff0000;
}

:first-child 不限制类型所以h1标签也属于p父标签子标签既也将计数在内所以h1为第一个子标签，又因为h1不为p标签所以未改变背景颜色

:nth- 计算时需将其内子标签也计算在内

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>


<h1>这是标题</h1>
<p>第一个段落。<p>第一个段落-2</p><p>第一个段落-3</p><p>第一个段落-4<p>第一个段落-4-1</p><p>第一个段落-2</p><p>第一个段落-3</p></p></p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>


</body>
</html>

如这里

<h1>这是标题</h1> <!--1-->
<p>第一个段落。
<!--2--><p>第一个段落-2
<!--3--></p>
<p>第一个段落-3
<!--1--></p><p>第一个段落-4<!--2--><p>第一个段落-4-1<!--3--></p><p>第一个段落-2<!--1--></p><p>第一个段落-3<!--2--></p></p>
<!--3--></p><!--1--><p>第二个段落。</p><!--2--><p>第三个段落。</p><!--3-->

:nth-of-type则将限制类型加入进去计算即可

可乐少点冰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css选择器之-of-type 以及nth- 补充

-of-type 限制类型p:first-of-type;p:nth-of-type(n);如上计算时只计算p标签不是p标签的不计算在内p:first-of-type{background:#ff0000;}p:first-child{background:#ff0000;}:first-child 不限制类型所以h1标签也属于p父标签子标签既
复制链接

扫一扫