首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css第n个子元素,每隔3+ 1,即: 4、7、10、13等

CSS中可以使用:nth-child()伪类选择器来选择第n个子元素。其中,n可以是一个具体的数字,也可以是一个公式。

对于每隔3+1的选择,可以使用公式n(3n+1)来表示。这个公式可以选择每隔3个元素中的第一个元素。

下面是一个完善且全面的答案:

CSS中的:nth-child()伪类选择器用于选择某个元素的第n个子元素。其中,n可以是一个具体的数字,也可以是一个公式。

对于每隔3+1的选择,可以使用公式n(3n+1)来表示。这个公式可以选择每隔3个元素中的第一个元素。

这种选择方式在实际开发中非常有用,可以用于给特定的元素添加样式或者执行特定的操作。

以下是一个示例代码:

代码语言:css
复制
/* 选择每隔3个元素中的第一个元素 */
:nth-child(3n+1) {
  /* 添加样式或执行操作 */
}

/* 选择每隔3个元素中的第一个元素,并设置背景颜色为红色 */
:nth-child(3n+1) {
  background-color: red;
}

这个选择器可以应用于各种场景,比如在一个列表中每隔3个元素显示一个广告,或者给每隔3个表格行添加特定的样式等。

在腾讯云的产品中,与CSS相关的产品主要是腾讯云CDN(内容分发网络)和腾讯云Web应用防火墙(WAF)。

腾讯云CDN是一种分布式部署的加速服务,可以将静态资源缓存到全球各地的节点上,提高网站的访问速度和稳定性。您可以使用CDN来加速CSS文件的加载,提升用户体验。

腾讯云Web应用防火墙(WAF)是一种云端安全服务,可以保护网站免受各种网络攻击。WAF可以检测和阻止恶意的CSS注入攻击,保护您的网站安全。

您可以通过以下链接了解更多关于腾讯云CDN和腾讯云WAF的信息:

腾讯云CDN产品介绍:https://cloud.tencent.com/product/cdn

腾讯云WAF产品介绍:https://cloud.tencent.com/product/waf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

web前端面试中10个关于css高频面试题,你都会吗?

,对于HTML文档,就是HTML元素 E:nth-child(n) 匹配其父元素n个子元素,第一个编号为1 E:nth-last-child(n) 匹配其父元素的倒数n个子元素,第一个编号为1 E...E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type...(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child...Opera 10, Safari 4, Chrome 3 outline 外边框 FF3+, safari 4, chrome 3, opera 10 background-size 不指定背景图片的尺寸...safari 4, chrome 3, opera 10 background-origin 指定背景图片从哪里开始显示 safari 4, chrome 3, FF 3+ background-clip

2.8K20

前端学习(15)~css3学习(九):选择器详解

CSS3又新增了其它的伪类选择器。这一小段,我们来学习CSS3中的结构伪类选择器:通过结构来进行筛选。 1、格式:(第一部分) E:first-child 匹配父元素的第一个子元素E。...E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。...E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child(n) 匹配父元素的倒数n个子元素E。...如果选择器写成li:nth-child(n),则表示所有的li。因为此时的 n 表示 0,1,2,3,4,5,6,7,8........E:nth-of-type(n) 匹配同类型中的n个同级兄弟元素E。 E:nth-last-of-type(n) 匹配同类型中的倒数n个同级兄弟元素E。

48820

CSS选择器详解

CSS3 E:nth-child(n) { sRules } 要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body, E 可以是 body 的子元素 匹配父元素 n 个子元素...(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1) 匹配父元素的倒数n个子元素E,假设该子元素不是E,则选择符无效 ...html,E可以是html的子元素,也就是说E可以是body 该选择符总是能命中父元素1个为E的子元素,不论1个子元素是否为E /* 设置第一个元素类型为 p 的元素为红色...CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,E可以是html的子元素...n个为E的子元素,不论倒数n个子元素是否为E p:nth-last-of-type(1) { color: red; } <div

2.8K40

结构伪类选择器-CSS3新特性

主要语法如下: 编号 语法 含义 1 E:first-child 匹配父元素中的第一个子元素E 2 E:last-child 匹配父元素中最后一个E元素 3 E:nth-child(n) 匹配父元素中的...n个子元素E 4 E:first-of-type 指定类型E的第一个 5 E:last-of-type 指定类型E的最后一个 6 E:nth-of-type(n) 指定类型E的n个 公式 选取范围...n 所有子元素 2n 偶数子元素 2n+1 奇数子元素 5n 5、10、15...个子元素 n+3 从3个子元素开始(包括3个)到最后 -n+6 前6个子元素(注意不能写成 6-n 不生效) 其中...1. n如果是数字,就是选择n个子元素,里面数字从1开始... 2. n如果是关键字: even代表偶数,odd代表奇数 3. n可以是公式︰常见的公式如下: 4....>我是5个li image.png 示例4:如下代码会选中ul下5、10、15…的子元素

46630

Jenkins环境配置定时构建

31 1-12 0-7 示例 每隔15分钟执行一次 H/15 * * * * 每隔2小时执行一次 H H/2 * * * 每隔3天执行一次 H H H/3 * * 每隔3天执行一次(每月的1-...例如:在 DayofMonth使用5W,如果5日是星期六,则将在最近的工作日:星期五,4日触发。如果5日是星期天,则在6日(周一)触发;如果5日在星期一到星期五中的一天,则就在5日触发。...例如在4#2,表示某月的第二个星期三。 举几个例子: 0 0 2 1 * ? *         //表示在每月的1日的凌晨2点调度任务 0 15 10 ?...* 6L         //2002-2006 表示2002-2006年的每个月的最后一个星期五上午10:15执行作 3、Cron举例 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素...THU,FRI,SAT) 年份(1970-2099) 其中每个元素可以是一个值(如6),一个连续区间(9-12),一个间隔时间(8-18/4)(/表示每隔4小时),一个列表(1,3,5)通配符。

1.9K30

【UI自动化-2】UI自动化元素定位专题

,又因为对于每一个元素,它的各个子元素都是有序的,所以通过索引就能准确定位到目标元素: /A/B/C[1]表示A元素下的B元素下的C元素下的第一个子元素。...:F[n]:获取和E元素同级且位于其后的n个F元素 preceding-sibling::F:获取和E元素同级且位于其前的F元素 preceding-sibling::F[n]:获取和E元素同级且位于其前的...以百度搜索框代码为例,span:nth-child(7)这样是匹配失败的,因为form元素7个子元素是input类型元素,不是span类型。...E:nth-of-type(n)与E:nth-child(n)的区别在于,前者匹配第n个E元素,后者匹配到n元素并判断是否是E元素,不是则匹配失败。...’] > input:nth-child(2)”) 属性class为s_ipt_wr的span元素的倒数3个子元素,且其类型为input的元素(位置和类型不对应则匹配失败)By.cssSelector

1.8K30

01-移动端开发教程-CSS3新特性

语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) n个子元素,计算方法是E元素的全部兄弟元素; E:nth-last-child...(n) 同E:nth-child(n) 相似,只是倒着计算;n遵循线性变化,其取值1、2、3、4、......E:empty 选中没有任何子节点的E元素;(使用不是非常广泛) n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;需要满足y=ax...color: rgba(23,23,23,.7); 4.2 新增了HSLA模式 Hue、Saturation、Lightness、AlphaHSLA 表示 说明 H Hue(色调)。...提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,1个参数表示水平半径,2个参数表示垂直半径,如2个参数省略,则默认等于1个参数。

2.6K70

01-移动端开发教程-CSS3新特性(上)

语法规则 说明 E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) n个子元素,计算方法是E元素的全部兄弟元素; E:nth-last-child...(n) 同E:nth-child(n) 相似,只是倒着计算;n遵循线性变化,其取值1、2、3、4、......E:empty 选中没有任何子节点的E元素;(使用不是非常广泛) n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;需要满足y=ax+...color: rgba(23,23,23,.7); 4.2 新增了HSLA模式 Hue、Saturation、Lightness、AlphaHSLA 表示 说明 H Hue(色调)。...提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,1个参数表示水平半径,2个参数表示垂直半径,如2个参数省略,则默认等于1个参数。

1.5K01

CSS 1.0~3.0选择器(下)

6.CSS 3的同级元素通用选择器 选择器含义示例E ~ F匹配任何在E元素之后的同级F元素p ~ ul { background:#ff0; } 7CSS 3 属性选择器 选择器含义示例E[att...{ background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; }E:nth-child(n)匹配其父元素...n个子元素,第一个编号为1E:nth-last-child(n)匹配其父元素的倒数n个子元素,第一个编号为1E:nth-of-type(n)与:nth-child()作用类似,但是仅匹配使用同种标签的元素...(1)E:first-of-type匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)E:last-of-type匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type...,注意,文本节点也被看作子元素 10.CSS 3的反选伪类 选择器含义示例E:not(s)匹配不符合当前选择器的任何元素:not(p) { border:1px solid #ccc; } 11.

75130

cron表达式详解

例如:在 DayofMonth使用5W,如果5日是星期六,则将在最近的工作日:星期五,4日触发。如果5日是星期天,则在6日(周一)触发;如果5日在星期一 到星期五中的一天,则就在5日触发。...例如在4#2,表示某月的第二个星期三。 举几个例子: 0 0 2 1 * ? * 表示在每月的1日的凌晨2点调度任务 0 15 10 ?...6L 2002-2006 表示2002-2006年的每个月的最后一个星期五上午10:15执行作 一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素。...其中每个元素可以是一个值(如6),一个连续区间(9-12),一个间隔时间(8-18/4)(/表示每隔4小时),一个列表(1,3,5),通配符。...由于月份中的日期和星期中的日期这两个元素互斥的,必须要对其中一个设置? 0 0 10,14,16 * * ? 每天上午10点,下午2点,4点 0 0/30 9-17 * * ?

1.8K10

初识CSS3

1.CSS规则由两部分构成,选择器和声明器    声明必须放在{}中并且声明可以是一条或者多条    每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开    注意:       ...6.css3的选择器    标签选择器 类选择器 和id选择器  1)类选择器 类选择器标签内容 .green{  font-size:20px;...E元素相邻的后面兄弟元素下,是一个或多个元素;    2)相邻兄弟选中的是与E元素仅挨的F元素,其中选中的仅是一个元素 8.结构伪类选择器    1)E:first-child   作为父元素的第一个子元素元素...E    2) E:last-child   作为父元素的最后一个子元素元素E    3)E F:nth-child(n)  选择父级元素E 的n元素F(n可以是1/2/3)关键字为even  odd...(n)  选择父元素内具有指定类型的n个F元素 注:E F:nth-child(n)和 E F:nth-of-type(n)使用时记住以下关键点:       1)E F:nth-child(n)在父级里从第一个元素开始查找

75980

jquery获取第几个子元素_js获取元素的指定子元素

元素;对 于$(”label:only-child“)会选出是label元素,同时它是它父类唯一的子元素的label元素; :nth-child(n):返回n个子节点,n1开始,如果n取0,...An+B的所有子节点,比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素; :even:页面范围内的处于偶数位置的元素,如:li:even返回全部偶数li元素; :odd:页面范围内的处于奇数位置的元素...; :eq(n):n个匹配的元素(n从0开始),如:li:eq(3)返回整个页面的第四个li元素,ul li:eq(1)返回页面中第一个ul元素下的第二个li元素,注意:只匹配一次就返回了; :gt...(n):n个匹配元素(不包括)之后的元素(n从0开始),如:ul:gt(2)返回从3个ul开始的所有ul元素(含第三个); :lt(n):n个匹配元素(不包括)之前的元素(n从0开始),如:ul...:lt(2)返回从0个和1个ul元素; 2.

27.1K30

css 总结1

4、所有的 XHTML 元素必须被嵌套于 根元素中 三、css选择器 1CSS 元素选择器 html {color:black;} h1 {color:blue;} h2 {color...6、CSS 后代选择器 h1 em {color:red;} 7CSS元素选择器 与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素元素元素。... first-of-type css选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素元素的第一个子元素,若第一个子元素不是p元素,则匹配不到任何元素...(匹配p的父元素只有一个p元素,子元素可能包含其他的元素) (9)  :nth-child(n) 选择属于父元素n个子元素10):nth-last-child(n) 选择属于父元素倒是n元素...(11)p:nth-of-type(n) 选择属于其父元素n个p元素(不是p元素的不在排序范围) (12)p:nth-last-of-type(n) 选择属于其父元素倒数n个p 元素 (13

64630
领券