前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器用案例把知识点分析得明明白白~

最新推荐文章于 2023-06-08 00:16:24 发布

敲代码的小提琴手

最新推荐文章于 2023-06-08 00:16:24 发布

阅读量607

点赞数 2

分类专栏： # 前端开发基础学习文章标签： html css css3 html5

嘿朋友谢谢你复制我的文章喜欢的话给点个赞交个朋友吧~

本文链接：https://blog.csdn.net/qq_45704942/article/details/113915708

版权

前端开发基础学习专栏收录该内容

16 篇文章 3 订阅

订阅专栏

选择器作用

nth-child(n)选择器的作用：
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

2021-9-16前来填坑
并不是人家例子给的不好是我当时太蠢没看清是父元素！

n 可以是一个数字，一个关键字，或者一个公式。

W3school给的例子

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

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

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

正好 n=2的时候标记有红色的是p的第一个。也就是其父元素body的第二个元素没毛病

在这里插入图片描述
这里父元素body的第一个子元素和
没有变化有点怪

试一下 h1:nth-child(1)

这样就可以了~

【2】奇数偶数

<!DOCTYPE html>
<html>
<head>
<style> 
//匹配所有奇数的子元素 也就是 第2 4 6 ....个子元素
p:nth-child(odd)
{
background:pink;
}
//匹配所有偶数的子元素 也就是第1 3 5 7...个子元素
p:nth-child(even)
{
background:skyblue;
}
</style>
</head>
<body>

<h1>p是父元素标签</h1>
//下面是父元素的第1个子元素
<p>奇数 蓝色。</p>
//下面是父元素的第2个子元素
<p>偶数 粉色。</p>
//下面是父元素的第3个子元素
<p>奇数 蓝色。</p>
//下面是父元素的第4个子元素
<p>偶数 粉色。</p>

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

在这里插入图片描述

这里依旧是标题木有反应 emmm
在这里插入图片描述
改了一下 h1:nth-child(odd) 结果变成只有标题有颜色了。

【3】带计数器n的简单表达式
来我们摆脱W3school的例子
设想这样一个情景
我们有四个盒子
如果我们想在前三个盒子后面增添一个小元素（比如说竖杠）最后一个盒子并不需要这个小元素
我们需要怎么去做呢？

<li><img src="upload/recom_01.jpg" alt="1号背景图"></li>
<li><img src="upload/recom_02.jpg" alt="2号背景图"></li>
<li><img src="upload/recom_03.jpg" alt="3号背景图"></li>
<li><img src="upload/recom_04.jpg" alt="4号背景图"></li>

.recom_bd ul li:nth-child(-n+3)::after {
    /* 子绝父相 */
    position: absolute;
    content: '';
    /* 用定位让它压住其他盒子 */
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

我们使用了公式 (an + b)。
其中，a代表一个循环的大小，n 是计数器（从 0 开始），b 是偏移值。
本例中

ul li:nth-child(-n+3)::after

a=-1 说明循环是倒着进行的从第3个元素开始

这里n=3就是改变第三个标签元素的属性啦！
因为我们的li标签外面是套了一个盒子的哦！

可以看到效果达到了~
只有第四个图片后面没有竖线
在这里插入图片描述

在这里插入图片描述

敲代码的小提琴手

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器用案例把知识点分析得明明白白~

选择器作用nth-child(n)选择器的作用：nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是一个数字，一个关键字，或者一个公式。W3school给的例子<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h
复制链接

扫一扫