开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS第n个子项(奇数)不工作

CSS第n个子项(奇数)不工作是指在使用CSS选择器:nth-child(n)时，无法正确选择到奇数位置的子项。这可能是由于以下几个原因导致的：

CSS选择器错误：首先需要确认选择器的语法是否正确。正确的nth-child选择器语法是:nth-child(odd)，其中odd表示奇数。如果选择器语法错误，可能会导致选择不到目标子项。
父元素样式影响：有时候，父元素的样式可能会影响到子项的选择。例如，父元素设置了display属性为flex或grid，可能会导致:nth-child选择器无法准确选择到奇数位置的子项。这时可以尝试修改父元素的样式，或者使用其他选择器来准确选择目标子项。
子项位置错误：如果子项的位置不是从1开始计数，而是从0开始计数，那么:nth-child选择器选择奇数位置的子项时需要使用:nth-child(2n+1)的形式。其中2n+1表示奇数位置的公式。

解决这个问题的方法有：

检查选择器语法：确保选择器语法正确，使用:nth-child(odd)来选择奇数位置的子项。
检查父元素样式：检查父元素是否设置了可能影响子项选择的样式，尝试修改父元素样式或使用其他选择器。
检查子项位置：如果子项位置不是从1开始计数，使用:nth-child(2n+1)来选择奇数位置的子项。

腾讯云相关产品和产品介绍链接地址：

腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储等。以下是一些相关产品和介绍链接地址：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。了解更多：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务。了解更多：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠的对象存储服务，适用于图片、音视频、文档等各种类型的数据存储。了解更多：https://cloud.tencent.com/product/cos

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

相关搜索:第n个孩子(偶数)和第n个孩子(奇数)影响所有孩子的第n个孩子(奇数)，而不是奇数 CSS应用第n个类型：第一个孩子和:第n个孩子(1)不工作选择CSS中的每个第N个元素选择第n个直到最后一个子项的XPath？CSS在第n个元素后断开子元素获取Oracle中的第n个工作日期 CSS -在插入每第n个相邻元素之前重复a CSS选择父级的第n个直接子元素使用第n个子CSS组织3-2个模式 CSS:第n个子元素和第n个类型在我的标记结构中不起作用如何使用CSS :n个孩子(奇数)使用角度组件的表行？第3个div和clearfix的位置不工作在C#中获得每月的第n个工作日每个月的第n个工作日later.js 只有一个CSS类不工作，所有其他CSS都工作正常自动播放vimeo在2个域上工作，但在第3个域上不工作如何使用css第n个子元素(-n+3)仅显示列表中的前三个图像将数据从第n列导入到另一个工作表

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

第 N 个神奇数字（二分查找）

返回第 N 个神奇数字。由于答案可能非常大，返回它模 10^9 + 7 的结果。...示例 1：输入：N = 1, A = 2, B = 3 输出：2 示例 2：输入：N = 4, A = 2, B = 3 输出：6 示例 3：输入：N = 5, A = 2, B = 4 输出...while(lo <= hi) { mid = lo+((hi-lo)>>1); num = ct(mid,A,B);// mid 包含多少个...神奇数字 if(num >= N) { ans = mid; hi = mid-1;...int A, int B) { return n/A + n/B - n/lcmab; } }; 4 ms 5.9 MB C++ ---- 我的CSDN博客地址 https:/

2792 0

878.第 N 个神奇数字每日一题 11-22

原题一个正整数如果能被 a 或 b 整除，那么它是神奇的。给定三个整数 n , a , b ，返回第 n 个神奇的数字。因为答案可能很大，所以返回答案对 10^9 + 7 取模后的值。...<= n <= 10^9 2 <= a, b <= 4 * 10^4 难度Hard 标签数学二分查找分析看完题目我感觉一个线性遍历就能出来了，可是忘记了今天这是一道困难题。...于是乎我的第一个解法横空出世，默认的testCase也通过了。...超时了哈哈哈于是开始重新分析题目，发现规律: 一个数里包含的神奇数字(x)的数量= x/a + x/b - x/最小公倍数代码实现 func nthMagicalNumber(n int,...minGongBeiShu(a, b) maxVal := 1000000000 + 7 cnt := 0 for start <= end { // 找到中间的数,计算出这个数有几个神奇数字

2282 0

【CSS3】CSS3 结构伪类选择器 ( E:first-child E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

/* 结构伪类选择器选择 ul 父容器下的第 1 个 li 子元素 */ background-color: blue; } 关键字 : 借助下面的奇数 /...\} , 非负整数 ; 2n : 表示偶数 ; 2n + 1 : 表示奇数 ; 5n : 表示第 5 / 10 / 15 / 20 / 25 等索引数字 ; 将 \{ n = 0 , 1 , 2...\cdots \} 代入即可 ; 如果 n 索引是第 0 个元素 , 或者超出了元素个数 , 该选择器会被忽略 ; 2、n 为数字的情况代码示例 : <!...) { /* 结构伪类选择器选择 ul 父容器下的奇数索引的 li 子元素偶数索引也就是第 1 个 / 第 3 个 / 第 5 个 li 子元素...\} , 非负整数 ; 2n : 表示偶数 ; 2n + 1 : 表示奇数 ; 5n : 表示第 5 / 10 / 15 / 20 / 25 等索引数字 ; 将 \{ n = 0 , 1 ,

1.3K3 0

css3的nth-child选择器的详细探讨

选择第三个到第九个之间的奇数行(不包括3\9) ○○○○●○●○○○12345678910 怎么做呢?...选择第三个到第九个之间的奇数行(包括3\9) ○○●○●○●○●○12345678910 ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9...个dt 第1个dd 第2个dt 第2个dd 第3个dt...dd>第5个dd 要实现的效果如下,选择dt的偶数和dd的奇数, DT用圆形演示 DD用矩形演示\ ○■●□○■●□○■1dt1dd2dt2dd3dt3dd4dt4dd5dt5dd...灵活的运用.正是因为这些美好的CSS3属性,让我们前端工程师对于自己的工作是越来越喜爱了.

4971 0

CSS3中:last-child及其选择器的用法

其实很多时候我们都能用到css的选择器功能，比如调用N篇文章，想设置奇数行显示一种颜色，偶数行显示一种颜色，然后代码一般都是“foreach”循环语句，不建议直接写在代码里，那么css就能轻而易举的解决这个问题... li:nth-child(-n+4){background:#ddd} :nth-child(2n)选取偶数标签，2n也可以是even .talklee li:nth-child(2n){background...:#ddd} :nth-child(2n-1)选取奇数标签，2n-1可以是odd .talklee li:nth-child(2n-1){background:#ddd} :nth-child(3n+1...)自定义选取标签，3n+1表示“隔二取一” .talklee li:nth-child(3n+1){background:#ddd} :last-child选取最后一个标签 .talklee li:...last-child{background:#ddd} :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 .talklee li:nth-last-child(3){background

8241 0

CSS 选择器 nth-child 的几种用法

我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。...上面是几种比较常见的选择方法，我们还可以通过 CSS 更灵活的进行选择，有下面几种方法： nth-child(-n+n) nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个...(n)：选择倒数第 n 个元素。...n) nth-last-child(n+n)：选择倒数第 n 个之前的元素。...+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

4.2K0 0

jQuery选择器大全(48个代码片段+21幅图演示)

——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数） $(document).ready(function () { $(...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...('background', '#FF0000'); // 奇数行背景蓝色 $('tr:nth-child(odd)').css('background'

5K8 0

CSS 01 准备选择器、伪元素

CSS3 浏览器支持情况网址查询：caniuse.com CSS3的伪类选择器（一）动态伪类选器 a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器... html部分： // disable 是状态 CSS部分：（根据状态确定样式） input :enable{} input:disable{} CSS3的伪类选择器（二）结构伪类选择器...(****){} 选中顺序从左往右 li:nth-child(2n){} 元素的第偶数个子元素选中 li:nth-child(2n+1){} 元素的第奇数个子元素选中...li:nth-child(n+5){} 元素从第5个子元素开始选中 li:nth-child(4n+1){} 元素每4个元素选中...content:; //伪元素的content属性必须要有，不设置也要有，留空 } .demo::after{ //demo之后 content:; }

9304 0

前端CSS Flex布局8大重难点知识，收藏起来吧

子项.left 设置固定宽 width:300px 子项.right 不设置宽，添加 flex-grow:1;// 占满所有剩余空间 2、Flex 实现三栏布局 (左右固定，中间自适应) 给父元素加上...display:flex; // 设为弹性布局子项.left 和 .right 分别设置固定宽 width:200px 和 width:250px; 子项.middle 不设置宽，添加 flex-grow...解决方案：如果我们每一行显示的个数为 n，那我们可以最后一行子项的后面加上 n-2 个 span 元素，span 元素的宽度和其它子项元素宽度一样，但不用设置高度。...所以要去掉这两种情况，只需要加 n-2 个 span 元素就好 6、flex 实现 8 个元素分两行排列每行 4 个平均分布 - 自适应给父容器添加如下属性： display: flex; //...; 单独控制自身垂直底部对齐当然 Flex 布局已经到了 CSS 阶段的后期阶段了，如果你没有学过 CSS，或者掌握不牢固，建议可以从开始学习下 CSS。

1.7K1 0

jQuery选择器大全

——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数） $(document).ready(function () { $('tr:even').css...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...('background', '#FF0000'); // 奇数行背景蓝色 $('tr:nth-child(odd)').css('background', '#0000FF'); }); </script

5.2K1 0

css 指定孩子节点样式设置

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情作为一个前端，我经常遇到list展示的需求。...可以衍生以下几种使用方式: 选择第3项：:nth-child(3) 选择第1到第3项：:nth-child(-n+3) 选择偶数项：:nth-child(2n) 选择奇数项：:nth-child...(2n+1) 选择范围（交集），从第4个到第5个：:nth-child(n+4):nth-child(-n+5) css代码如下: .container :nth-child(n){ display...个到第5个(n+4)(-n+5) {new Array(6).fill(1).map((v, index) => {...指定孩子节点样式设置从之前代码解决，变成css解决后，代码感觉更加清爽了，写代码的速度也更快了。

1.6K1 0

css选择器选择奇数行或偶数行

css选择器选择奇数行或偶数行实现方式有两种方式一:nth-child /* 奇数行*/ div:nth-child(odd){ } /* 偶数行 */ div:nth-child(even)...{ } :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。...方式二:nth-of-type /* 奇数行*/ div:nth-of-type(odd){ } /* 偶数行 */ div:nth-of-type(even){ } nth-of-type(...n) : 匹配同类型中的第n个同级兄弟元素。

2.4K1 0

用微前端的方式搭建类单页应用

总第279篇 2018年第71篇前言微前端由ThoughtWorks 2016年提出，将后端微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。...“Portal项目”是比较特殊的，在开发阶段是一个容器，不包含任何业务，除了提供“子项目”注册、合并功能外，还可以提供一些系统级公共支持，例如：用户登录机制菜单权限获取全局异常处理全局数据打点...CSS样式问题解决之后，接下来看一下，Portal提供的init做了哪些工作。...”的reducers，把“子项目”的数据流挂载了redux上 “子项目”的弹出窗全部挂载在一个全局的div上，并为这个div添加对应的项目作用域，配合“子项目”构建的CSS，确保弹出框样式正确上述代码中还看到了...JS公共库版本统一为了不侵入“子项目”，我们采用构建过程中替换的方式来做，“Portal项目”把公共库引入进来，重新定义，然后通过window.app.require的方式引用，在编译“子项目”的时候

1.7K3 1

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

CSS3新特性-结构伪类选择器在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。...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....li image.png 示例3：如下代码会选中ul下的奇数子元素。...六、E:nth-of-type(n) 含义：指定类型E的第n个。

4833 0

CSS选择器低版本IE浏览器的兼容

CSS 后代选择器很好用，让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。...例如：让第2个 p 标签变成“蓝色”字体。...常用的方法： div p:nth-child(2) { color: blue; } 或者： div p:nth-of-type(2) { color: blue; } 这样就能给第2个...('color','blue'); } } JQuery也可以用 :nth-child(odd) 奇数，:nth-child(odd) 偶数来处理。...纯css2方法：从第二个开始选择有一种很简单的方法，纯CSS实现。就是使用 element+element 即一个元素紧接着另一个元素选择器。

2.5K1 1

控制标签的显示数量—css3: nth-child()

3 4 5 6 css...color: green; } /* 表示选择列表中的标签从第3个开始一直到最后 */ .key_box a:nth-child(n+4...) { /* color: green; */ display: none; } 结果：（只显示3个，第三个开始隐藏掉了...）附： css3:nth-child选取第几个标签元素选择标签选择第几个 nth-child(3) 选择第3个 nth-child(2n) 选择偶数标签 nth-child(2n-1) 选择奇数标签...nth-child(n+3) 选择从第3个标签开始到最后 nth-child(-n+3) 选择从第0到3，即小于3的标签

9180 0

jQuery选择器大全(48个代码片段+21幅图演示)2

——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...('background', '#FF0000'); // 奇数行背景蓝色 $('tr:nth-child(odd)').css('background',...}); 必须勾选你现在工作的企业属于

1.6K8 0

前端面试题归类-css

：●flex子项目占的份数flex属性定义子项目分配剩余空间,用flex来表示占多少份数。...●align-self控制子项自己在侧轴的排列方式align-self属性允许单个项目有与其他项目不-样的对齐方式，可覆盖align-items属性。...flex-basis：0%;flex为两个非负数字n1，n2：分别为flex-grow和flex-shrink的值。...：1； flex-basis：L; flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，flex：n L；...:480px)”>CSS : @media only screen and (max-device-width:480px) {/css样式/}在网页中的应该使用奇数还是偶数的字体？

1.6K4 0

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

元素；对于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素； :nth-child(n)：返回第n个子节点，n从1开始，如果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.2K3 0

前端成神之路-HTML5CSS3_01

语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储...七、CSS3 属性选择器(上) 八、CSS3 属性选择器(下) 九、结构伪类选择器十、nth-child 参数详解 nth-child 详解注意：本质上就是选中第几个子元素 n 可以是数字...、关键字、公式 n 如果是数字，就是选中第几个常见的关键字有 even 偶数、odd 奇数常见的公式如下(如果 n 是公式，则从 0 开始计算) 但是第 0 个元素或者超出了元素的个数会被忽略.../* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第...5个开始往后选择 */ ul li:nth-child(n + 5) { background-color: peru; } /* -n + 5 前五个 */ ul li:nth-child

4491 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭