CSS选择器(nth-child)

news2024/11/18 11:45:36

:nth-child()这个选择符括号内可以写+/- an + b (a,b均为整数)或者关键字

因为工作中有遇到要隐藏列表第三个子元素之后的所有子元素,所以有用到这个选择器,记录一下

(1) nth-child(a)

当括号里只写一个数字,比如 .list li:nth-child(2),作用为选中父元素list的第二个子元素li标签,如果list的第二个子元素不是li标签,则选择符失效

.list li:nth-child(2) { color: #f00;
} 

(2) nth-child(2n) / nth-child(2n+1)

括号内写2n就是选中list父元素的所有偶数项子元素list2n+1就是选中所有奇数项子元素。

.list > li:nth-child(2n + 1){color: #f00;
} 

(3) nth-child(even) / nth-child(odd)

括号内也允许使用关键字:odd代表奇数,even代表偶数。

.list > li:nth-child(even){color: #0f0;
} 

(4) nth-child(+/-n+b)

n的作用是连续向后选中,b的作用是从第几个子元素开始。 以.list li:nth-child(n+3)为例,将会选中第三个元素及之后的所有子元素

.list > li:nth-child(n + 3){color: #E6CC7E;
} 
.list > li:nth-child(-n + 3){color: #E6CC7E;
} 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

元素垂直居中的五种方式

元素内容垂直居中 本文介绍: 元素标签内的内容垂直居中有两种思路, 第一种思路是将元素内容利用行高或者内边距padding属性设置 第二种思路是子盒子在父盒子中垂直居中,利用flex布局或者position定位方式 五种方式实现元素内容垂直居中第一种…

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)

前言 最近在写 echarts 的时候碰到了这么一个报错,如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化,下面几种方法是经本人自测最有效的解决方案。 报错截图 解决方案: 1. this.$nextTick 该方法思路是将回调延迟…

Vue|样式绑定

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 文末名片获取源码 精…

【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别

目录 前言: 完整内容请关注: 一、组件的基本使用 二、全局组件和局部组件 全局注册,通过 Vue.component 局部注册,通过 components:{} 全局组件 局部组件 三、父组件和子组件的区别 前言: 完整内容请关注&am…

vue2中使用axios,以及axios拦截器的配置

目录 一、vue2项目中如何实现异步请求 1、axios:是一个基于Promise的网络请求库。既可以在node.js(服务器端)使用,也可以在浏览器端使用 2、vue中的使用方法 ​ (2)引用方法: ​ A、原生的…

HTML侧边导航栏

HTML侧边导航栏 简介&#xff1a;本文用最简洁的语言&#xff0c;来教会读者&#xff0c;如果用htmlcss来制作&#xff0c;侧边导航栏&#xff0c;本案例以手机商城中的部分为例子来制作。 第一步&#xff1a;构建框架 <body><!-- 首先确定导航栏中的内容 每个内容…

【vue 项目】el-upload 上传文件以及回显照片和下载文件

本次需求是上传多种固定格式的文件&#xff0c;且回显的时候&#xff0c;图片可以正常显示&#xff0c;文件可以进行下载 主要采用element的el-upload组件实现 1、文件上传 先看下&#xff0c;上传文件效果图 点击上传将文件放到网页&#xff0c;还有一个点击确定的按钮再上传…

猿创征文|【Typescript入门】常用数据类型(3)

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

Vue项目中的接口调用

在企业开发过程中&#xff0c;往往有着明确的前后端的分工&#xff0c;前端负责接收、使用接口&#xff0c;后端负责编写、处理接口。 对于前端如何使用接口&#xff0c;今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中&#xff0c;&#xff0c;有这…

windows系统完全卸载并重装Node(亲测可用)

windows系统完全卸载并重装Node(亲测可用) 完成上述6步之后开始重新下载配置Node 根据自己的需要下载对应版本即可 安装完成查看 查看是否安装成功 A、node -v 查看 node 版本 B、npm -v 查看 npm 版本 2、安装完成后&#xff0c;文件目录如下图 如果 npx 为 5.2.0&#xf…

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录1&#xff1a;网页PPT (5分) ✔✔✔2&#xff1a;蓝桥校园一卡通 &#xff08;10分&#xff09;✔✔✔3&#xff1a;心愿便利贴 (15分) ✔✔✔1&#xff1a;网页PPT (5分) ✔✔✔ switchPage( ) switchPage( ){ if(activeIndex 0 ){$(".btn.left").addClas…

浅谈vue中的$含义及其用法($xxx引用的位置)

看了各个帖子的描述&#xff0c;还是未能参透$在vue中所想发挥的本意&#xff0c;将一些一知半解的理解摘抄下来&#xff0c;顺带附上自己常见的用法&#xff0c;以加深理解和记忆。 摘抄 这些只是Vue的命名规则&#xff0c;为了区分普通变量属性&#xff0c;避免我们自己声明…

前端开发一枚,入职前自学的感觉不难,为什么工作起来很吃力?

前言 我是软件工程专业&#xff0c;学前端之前&#xff0c;学过 C/C、Java、PHP、.net 成绩还不错基本都是90多分。感觉自己干后端也不吃力。实验室里面的项目都是前后都写。最爱 PHP&#xff0c;本以为以后就走上PHP后端工程师的道路了。 由于项目需要的原因&#xff0c;后来…

关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现

&#x1f4c2;文章目录​​二、&#x1f4da;网站介绍​​​​三、&#x1f517;网站效果​​​​▶️1.视频演示​​​​&#x1f9e9; 2.图片演示​​​​四、&#x1f492; 网站代码​​​​&#x1f9f1;HTML结构代码​​​​&#x1f3e0;CSS样式代码​​​​五、&#x1…

Vue中实现自定义excel下载

最近在工作中遇到一个需求&#xff0c;就是需要在前端实现一个错误模板Excel的下载功能。 实现下载有两种方式&#xff0c;一种是后端生成一个excel&#xff0c;放在服务器指定目录下&#xff0c;然后前端直接去后端拿。第二种是后端传给前端一个json的list&#xff0c;前端用…

vue 中使用自定义字体

1.先下载字体 2.在新建的font.css文件中加入下面代码引入字体 font-face { font-family: MSYH; src: url(阿里巴巴普惠体 L.ttf); font-weight: normal; font-style: normal; } font-face { font-family: HY; src: url(汉仪天宇风行体W.ttf); font-weight: normal; f…

React Hooks概述及常用的Hooks介绍

React Hooks概述及常用的Hooks介绍1 为什么会有Hooks2 Hooks的含义3 Hooks的用法3.1 useState()&#xff1a;状态钩子3.2 useEffect()&#xff1a;副作用钩子3.3 useCallback()&#xff1a;记忆函数3.4 useMemo()&#xff1a;记忆组件3.5 useRef()&#xff1a;保存引用值3.6 us…

【Fiddler Everywhere】史上最强抓包工具(安装 修改教程)

一、Fiddler简介 Fiddler Everywhere 是啥&#xff1f; 从名称上来看&#xff0c;就大概能猜出它的寓意&#xff0c;官方也通过一段话&#xff0c;解释了Fiddler Everywhere的作用: Fiddler Everywhere is a web debugging proxy for any browser, any application, any proc…

WEB核心【请求转发(阶段重点)】第六章

目录 1&#xff1a;请求转发【阶段重点】 1.1:语法格式及转发使用 1.2:request域对象 1.3:小结&#xff1a;请求转发间做数据传递 1.4:请求转发访问受保护目录 1&#xff1a;请求转发【阶段重点】 1.1:语法格式及转发使用 格式&#xff1a;forward:/要跳转的程序或者页面…

移动端适配方案总结

目录一、背景介绍1.1 为什么要进行移动端适配1.2 移动端适配方案二、rem方案2.1 什么是rem2.2 怎么根据屏幕尺寸设置根元素html的font-size2.3 postcss-pxtorem三、viewport方案3.1 什么是viewport方案3.2 postcss-px-to-viewport四、总结&#xff08;如果只想看实现步骤可跳过…