tnblog
首页
视频
资源
登录

css3 中的 nth-child

5359人阅读 2020/11/17 15:43 总访问:455080 评论:0 收藏:0 手机
分类: 前端

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。


  1. e:first-child

选取第一个元素,在css添加

  1. li:first-child{
  2. background-color: blue;
  3. }

2.e.last-child

选取最后一个元素

  1. li:last-child{
  2. background-color: pink;
  3. }

3.e.nth-child(number)

选取里面第几个的元素

  1. li:nth-child(4){
  2. background-color: plum;
  3. }

4 e.nth-child(2n);

选取里面偶数元素

  1. li:nth-child(2n){
  2. background-color: green;
  3. }

5.e:nth-child(2n-1)

选取里面奇数的元素

  1. li:nth-child(2n-1){
  2. background-color: #ffabcd;
  3. }

6.e:nth-child(n+3)

选取从里面第三个开始到最后一个

  1. li:nth-child(n+3){
  2. background-color: blanchedalmond;
  3. }

7.e:nth-child(-n+3)

选取从0到第三个的所有元素

  1. li:nth-child(-n+3){
  2. background-color: indianred;
  3. }

8.e:nth-last-child(3)

选取倒数第三个元素

  1. li:nth-last-child(3){
  2. background-color: #ffabcd;
  3. }

9.e:nth-last-child(n+3)

选取从倒数第三到第一个之间的元素

  1. li:nth-last-child(n+3){
  2. background-color: #ffabcd;
  3. }
评价

css3样式学习代码

上代码!上代码!不说了<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UT...

HTML+css3+js 实现生日快乐代码,动态生成效果

<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>生日快乐</...

css3过渡渐变

code:<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>菜鸟教程...

css3 background-size

语法:div { background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat; }可以设置成10...

css3实现边框旋转但内容不动

其实思路就是把文字旋转的角度反向旋转抵消掉div旋转的角度即可 <!DOCTYPE html> <html> <head> ...

css3印章效果

配合bootstrap4来写的,效果图直接贴代码吧:直接复制运行即可看到效果:<!DOCTYPEhtml> <html> <head&g...

css3伪类选择器 nth-child , 循环变色,循环颜色。css最后一个元素。css找到某个子级别

选中第一个元素:.container>div:first-child{ background:#abcdff; }选中最后一个可以使用last-child.container>d...

css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线((下划线 ,下横线)),Tab菜单效果

[TOC]伪类选择器before和after,实现一个简单的标题效果 代码如下 <!DOCTYPE html> <html lang="en"...

css3 实现ps文字外发光效果实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮

CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur color; 参...

使用css3实现一个不规则div的布局

要实现不规则的div布局,可以使用CSS3的clip-path属性。该属性可以剪切元素的形状,从而实现不规则的布局。以下是一个示例...

css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色

设计图是这样的 可以使用线性渐变语法:background: linear-gradient(direction, color-stop1, color-stop2, …)例如从...

Java中的堆和栈以及堆栈的区别

在正式内容开始之前要说明一点,我们经常所说的堆栈堆栈是堆和栈统称,堆是堆,栈是栈,合在一起统称堆栈;  1.栈(stack)...

JavaScript中的事件委托

什么是事件委托事件委托在JavaScript中是非常常见的,它主要用于对某个元素中的子元素的冒泡事件进行监听。JavaScript高级...

判断table表格中checkbox 未选中的数据

判断table表格中checkbox 未选中的数据 var arrays = $(table).find("input[name='sel_sw']:not(:checked)&qu...

C解决execl中的ROUNDUP函数

最近做物流系统再excel中遇到了ROUNDUP函数:和四舍五入不一样,它的用途是无论取值后的值是多少,除了0,都向上+1如 ROUND...
吃亏决不亏,惜福才有福
排名
50
文章
9
粉丝
2
评论
0
ASP.NET中webform中的几个生命周期函数
修心 : 什么周期除了这些还有什么呢
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术