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

选择器作用

nth-child(n)选择器的作用:
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是一个数字,一个关键字,或者一个公式。

W3school给的例子


<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的第一个。
是第一个
第一个
一个

。。
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~_第1张图片
反正看完W3school给的例子直接把我看晕球了
没那么夸张但还是稍微有些抽象的
大家可以去用W3school的在线编辑器试下~
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~_第2张图片
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~_第3张图片
总之。。就是这么个情况
后来我问了下大佬 大佬跟我说 还是套在父盒子里面比较直观好用一些

【2】奇数偶数


<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>

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

依旧是W3school的例子
依旧是这么反人类。。
n取偶数 第奇数个(1 3 5)p的属性被改变
n取奇数 第偶数个(2 4 6)p的属性被改变

【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标签外面是套了一个盒子的哦!
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~_第5张图片

可以看到 效果达到了~
只有第四个图片后面没有竖线
前端疑难困惑小笔记-5 CSS3中的nth-child(n) 选择器 用案例把知识点分析得明明白白~_第6张图片

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

你可能感兴趣的:(前端开发基础——HTML,CSS学习,html,css,css3,html5)