IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> CSS中的nth-child()属性 -> 正文阅读

[JavaScript知识库]CSS中的nth-child()属性

目录

first-child、last-child、nth-child、nth-last-child、nth-of-type

1.first-child

2.margin属性解释拓展

2.1.写一个值

2.2. 写两个值

2.3.写三个值

?2.4.写四个值? ??

3.回归正题,看nth-child的使用方法

3.1、li:first-child:? ? ? ?

3.2.li:last-child:? ? ? ? ? ? ?

3.3.li:nth-child(n):? ? ? ?

?3.4.li:nth-child(odd);li:nth-child(2n+1)? ? ? ?

?3.5.循环使用样式

?3.6.nth-of-type:

?3.7. nth-last-child(n):?? ? ? ?

3.8.正方向范围

3.9.负方向范围

3.10.前后限制范围

3.11.nth-child的高级用法


first-child、last-child、nth-child、nth-last-child、nth-of-type

first-child,last-child可直接使用,例如? ul? li:first-child,ul li:last-child,

但是其余的选择都需要在后面加入(),例如ul li:nth-child(n);? ? ->选中ul元素下面第n个li元素,且n是从1开始的,这里和JavaScript中的eq()不同,eq选择也是从第1个开始的,但是索引值是从0开始

1.first-child

<style>
    body {
        font-size: 16px;  //给body的所有元素设置字体大小
        color: #333;      //给body的所有元素设置字体颜色
    }
    *{
        padding: 0;      //这个里面的(*)表示选中所有元素, 这里给所有元素去除默认的外边距和内间距
        margin: 0;
    }
    .container {
        width: 1200px;    //设置容器的宽度为1200px;
        margin: 200px auto 0;    //给容器设置外边距:  上边距为200px,左右居中,下边距为0,
    }
    li {
        list-style: none;        //去除li标签默认的圆点样式,如需要保留可将none改为desc;
    }
    .container ul li {
        margin-bottom: 10px;
    }
</style>

2.margin属性解释拓展

此处做一下margin的拓展:margin后面最少可以写一个值,最多四个,padding和这一样

2.1.写一个值

上间距、下间距、左间距、右间距均为这个值

例如:margin: 100px;?

2.2. 写两个值

第一个代表上间距和下间距,第二个代表左间距和右间距

例如:margin: 100px? 200px;?

2.3.写三个值

第一个代表上间距,第二个代表左间距和右间距,第三个代表下间距

例如:margin:? 100px? ?200px? ?300px;

?2.4.写四个值? ??

第一个代表上间距,第二个代表右间距,第三个代表下间距,第四个代表左间距,按照顺时针方向,可简称为上右下左

?

3.回归正题,看nth-child的使用方法

3.1、li:first-child:? ? ? ?

表示选择的是第一个?

例如

.container ul li:first-child {
    background: red;
}

?

3.2.li:last-child:? ? ? ? ? ? ?

表示选择的是最后一个

.container ul li:last-child {
    background: red;
}

?

3.3.li:nth-child(n):? ? ? ?

表示选择的第n个

例如

.container ul li:nth-child(3) {
    background: red;
}

?3.4.li:nth-child(odd);li:nth-child(2n+1)? ? ? ?

表示选中的是奇数

例如

.container ul li:nth-child(2n+1) {
    background: red;
}

.container ul li:nth-child(odd) {
    background: red;
}

?

?3.5.循环使用样式

li:nth-child(3n+1)? ? ?

每隔3个使用这个样式,(3n+1)也可理解为每3个分为一组,这一组中的第一个使用这个样式

.container ul li:nth-child(3n+1) {
    background: red;
}

3.6.nth-of-type:

只针对同类型的元素进行计算使用

例如

.container ul li:nth-of-type(3n+1) {
    background: red;
}

?这里我们可以看到只是选中了li标签,并没有选中p标签;但是如果使用nth-child()的话,就会从第一个p标签开始进行匹配,而不是第一个li标签,此时第一个li标签成为了第6个,而且如果是p:nth-child(1)的话,样式也不会生效;此时要写的是li:nth-child(6);

.container ul li:nth-child(6) {
    background: red;
}

?

?3.7. nth-last-child(n):?? ? ? ?

表示选择的是倒数第n个

.container ul li:nth-last-child(3) {
    background: red;
}

3.8.正方向范围

li:nth-child(n+3)? ? ? ? 从第3个开始使用这个样式

.container ul li:nth-child(n+3) {
    background: red;
}

?

3.9.负方向范围

li:nth-child(-n+3)? ? ? ? 从第3个开始向前面数

.container ul li:nth-child(-n+3) {
    background: red;
}

3.10.前后限制范围

li:nth-child(n+4):nth-child(-n+8)????????选中第4-8个子元素。使用?nth-child(n+4):nth-child(-n+8)?我们可以选中某一范围内子元素

.container ul li:nth-child(n+4):nth-child(-n+8) {
    background: red;
}

3.11.nth-child的高级用法

li:nth-child(n+2):nth-child(odd):nth-child(-n+9)? ?选中的子元素是从第2位到第9位,并且只包含奇数位

.container ul li:nth-child(n+2):nth-child(odd):nth-child(-n+9) {
    background: red;
}

关于nth-child()的使用方法就写到这里了,如果觉得本文写的不错的话,请您关注,点赞,评论哦!!!

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-28 12:18:13  更:2021-10-28 12:18:25 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 8:35:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码