伪类 nth-child() 和 nth-of-type()

最新推荐文章于 2022-09-13 12:16:25 发布

哈哩噜啾啾哈呀呀

最新推荐文章于 2022-09-13 12:16:25 发布

阅读量158

点赞数 1

分类专栏： code随手笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42798473/article/details/105319416

版权

本文介绍了CSS选择器:nth-child(n)和:nth-of-type(n)的工作原理和区别。:nth-child(n)选择器根据元素在父元素的所有子元素中的位置来选择，而:nth-of-type(n)则只针对特定类型的元素进行计数。通过示例，解释了这两个伪类如何影响元素的样式，并强调了它们与类选择器的并用情况。

摘要由CSDN通过智能技术生成

:nth-child(n)选择器

匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

这个选择器是先找前面元素的父元素，然后再找父元素下的第N个子元素，如果这个子元素和伪类前的选择器匹配，则添加相应样式，否则忽略。

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(odd)  /*奇数红色，下标从1开始*/
{
   
background:#ff0000;
}
p:nth-child(even)  /*偶数蓝色*/
{
   
background:#0000ff;
}
</style>
</head>
<body>

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