nth-child ()只有一个属性有效-为什么？

nth-child()是CSS中的一个伪类选择器，用于选择某个元素的父元素下的特定位置的子元素。它的语法是:nth-child(n)，其中n表示一个整数或者表达式。

在nth-child()中，只有一个属性有效的原因是它是一个选择器，用于选择满足特定条件的子元素，而不是对子元素进行操作或者改变。它只是用来选择元素，而不会对元素本身产生任何影响。

具体来说，nth-child()选择器会根据指定的表达式来选择父元素下的子元素，表达式可以是一个整数、关键词odd（奇数）或者关键词even（偶数）。选择器会根据表达式计算出的结果来选择相应位置的子元素。

举个例子，如果我们使用:nth-child(2)选择器，它会选择父元素下的第二个子元素。如果我们使用:nth-child(odd)选择器，它会选择父元素下的奇数位置的子元素。

由于nth-child()只是用来选择元素，所以它并不会对元素本身产生任何影响，也就是说它只是一个查询工具，而不是一个操作工具。因此，在nth-child()中只有一个属性有效。

在实际应用中，nth-child()选择器可以用于给特定位置的子元素添加样式或者选择特定位置的子元素进行操作。例如，我们可以使用:nth-child(3n)选择器来选择父元素下的每隔三个子元素，然后对这些子元素进行样式设置或者其他操作。

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

腾讯云产品：云服务器（CVM）- https://cloud.tencent.com/product/cvm
腾讯云产品：云数据库 MySQL 版- https://cloud.tencent.com/product/cdb_mysql
腾讯云产品：云原生容器服务- https://cloud.tencent.com/product/tke
腾讯云产品：人工智能- https://cloud.tencent.com/product/ai
腾讯云产品：物联网通信- https://cloud.tencent.com/product/iotexplorer
腾讯云产品：移动开发- https://cloud.tencent.com/product/mobdev
腾讯云产品：对象存储（COS）- https://cloud.tencent.com/product/cos
腾讯云产品：区块链服务- https://cloud.tencent.com/product/bcs
腾讯云产品：腾讯云游戏引擎（GSE）- https://cloud.tencent.com/product/gse

相关·内容

面试官：为什么data属性是一个函数而不是一个对象？

一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式...警告说明：返回的data应该是一个函数在每一个组件实例中二、组件data定义函数与对象的区别上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？...在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例这里我们模仿组件构造函数，定义data属性，采用对象的形式 function Component(){ } Component.prototype.data...getData(data, vm) : data || {} ... } data既能是object也能是function，那为什么还会出现上文警告呢？...面试官：为什么Vue中的v-if和v-for不建议一起用? 面试官：SPA（单页应用）首屏加载速度慢怎么解决？面试官：Vue中组件和插件有什么区别？

3.1K1 0

项目里出现两个配置类继承WebMvcConfigurationSupport时，为什么只有一个会生效（源码分析）

为什么我们的项目里出现两个配置类继承WebMvcConfigurationSupport时，只有一个会生效。...大家基本遇到过一种情况，就是我配置类中已经配置了，为什么就是没有生效呢？...其中一种原因就是，自己写的配置类也继承了WebMvcConfigurationSupport，当项目出现两个配置类都继承该类时，只会讲第一个配置类生效，至于为什么，就是今天博主需要讲解的，我们必须了解一些...循环，为什么要这么设计呢？...我直接把这个问题用源码的方式讲解清楚，方便大家明白为什么配置两个WebMvcConfigurationSupport类，只有一个生效。我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

1223 1

【CSS】381- 提升你的CSS选择器技巧

我为什么要这样做呢？我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。...(codepen链接：https://codepen.io/dgwyer/embed/qYvpMP) 工作电子邮件地址是必填项，并且要求填写正确有效；个人工作电子邮件地址不是必需的，但如若填写，需正确有效...例如： :nth-child() 传入一个参数，通过该参数将匹配特定的元素。...结构选择器中使用参数来做匹配的选择器如下： :nth-child() 正序匹配某个元素的一个或多个子元素。 :nth-last-child() 倒序匹配某个元素的一个或多个子元素。...例如，你可能想知道为什么 里只有“And so on…”这段文本是蓝色的，实际上里文本都本应该是蓝色的，只是其他元素被不同的选择器覆盖了颜色，才造成只有一段文本是蓝色

1K4 0

CSS(一)

为什么要引入另一种语言呢？处于不同的目的，HTML 设置网页内容，而 CSS 则定义如何向用户显示内容。在具体讲解 CSS 常用样式属性之前，我们将先讲解 CSS 基本语法规则以及级联规则。...一个属性名:属性值; 组合在一起称为一个声明(declaration)**。需要注意: 当是一个单一选择器，一条声明出错(如单词拼写错误)，其余规则以及该规则的其余声明都有效。只有该声明无效。...当是一个单一选择器，选择器书写出错，其余规则都有效，只有该规则无效。当是一个组合选择器，只要其中一个选择器书写出错，其余规则都有效，该规则无效。...ul:last-child { background-color: red; } E:nth-child(n) 选取 E 元素集合中第 n 个 E 元素。注意这个n是从1开始。...奇数行: 2n+1 或者 odd 偶数行: 2n 或者 even li:nth-child(2) { background-color: red; } E:visited E 元素是已经访问过目标的超链接的源锚点

4463 0

flex-grow计算公式

text-align: center; font-size: 30px; background: red; } ul>li:nth-child...(1){ /* 在伸缩项中有一个flex-grow属性, 用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器...默认情况下flex-grow的取值是0, 表示我们设置的宽度是多少就按照多少来显示, 不进行任何的扩充注意点: 只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候...flex-grow这个属性才有效 flex-grow缩小的公式 1.利用伸缩容器宽度 - 所有伸缩项的宽度 = 剩余空间 600...= 每一份的大小 300 / (1 + 4 + 8) = 23.07 3.利用当前伸缩项的宽度 + 需要的份数的宽度第一个伸缩项

8522 0

flex-basis

100px; text-align: center; font-size: 30px; background: red; } ul>li:nth-child...(1){ /* 1.在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度注意点: flex-basis 只有在伸缩布局中才有效...width设置宽度就会无效也就是说flex-basis的优先级要高于width的优先级 3.在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是...auto,一个设置的是具体的值, 那么会按照具体的值来显示 */ /*flex-basis: 100px;*/ /*width: 200px;*/...(2){ background: green; } ul>li:nth-child(3){ background: blue; } </style

2571 0

flex-shrink计算公式

(1){ /* 在伸缩项中有一个flex-shrink属性, 用于控制当所有伸缩项的宽度总和大于伸缩容器宽度的时候如何缩小自己, 以便于所有伸缩项宽度的总和能够填满整个伸缩容器...默认情况下flex-shrink的取值是1, 表示当所有伸缩项宽度的总和大于伸缩容器宽度的时候等比缩小自己注意点: 只有当所有伸缩项的宽度总和大于伸缩容器宽度的时候...flex-shrink这个属性才有效 flex-shrink扩充的公式 1.利用所有伸缩项的宽度总和 - 伸缩容器宽度 = 溢出的宽度...900 - 600 = 300 2.计算权重值利用每一个伸缩项需要的份数 * 当前伸缩项的宽度然后再相加 1 * 300 +...(2){ background: green; flex-shrink: 4; } ul>li:nth-child(3){

7952 0

【CSS】770- 多层嵌套的CSS 3D动画技术详解

网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。下面让我来一步一步的带你理解网页中相互嵌套的3D动画是如何实现的！...transform-origin: 0 0 /*whatever y value you wish*/; transform: rotateY(-45deg); } 对于使用CSS 3D变换，你唯一需要添加的CSS前缀可能只有...只需要在门框上添加一个frame--ani类，设定一个动画动作，将perspective透视属性移动到它的父元素上： HTML代码变成了这样: <div class='container container...的确，事情就是这样，因为transform-style属性(用来告诉浏览器一个具有3D变换属性的子元素是否附随父元素的3D变换属性)的缺省值是flat。...我们需要使用transform-style: preserve-3d属性，我们简单的增加了一个cube--ani类，这段CSS代码是： .cube--ani { animation: rot 4s

1K2 0

我可能学到了“假”的CSS：伪类伪元素

…、/\ 等辅助类字符，无法被正确处理成首字符，会和第一个“有效字符”连带处理首字符前面不能有图片或者inline-table之类的元素存在 ::before也会参与到::first-letter的规则中...，::before如果存在，其首字符会被应用样式只有部分样式对 ::first-letter 有效所有字体相关属性：font, font-style, font-variant, font-weight..., letter-spacing, word-spacing(合适情境下), line-height, float, vertical-align（只有当float为none的时候）这些CSS属性们换句话说...() 和 not() 一样，:nth-child() 和 :nth-last-child() 也是函数式的伪类选择器；接受一个单一参数，可取值为： odd -- 奇数 even -- 偶数一个整数 -...:nth-last-child() 和 :nth-child() 规则相同，唯一的区别在于从最后一个元素反向计算 :only-child 匹配相对于其父元素类型唯一的子元素 :empty 匹配空的元素

1.4K1 0

flex-wrap align-content详解

flex; /* 1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项 2.在伸缩容器中有一个叫做...;/*放不下就换行而不是等比压缩*/ /*flex-wrap: wrap-reverse;/*放不下就换行 , 以行为单位进行反转*/ /*在伸缩容器中有一个叫做...align-content的属性, 是专门用于设置换行之后的对齐方式的注意点: 只有伸缩项发生了换行这个属性才有效*/ /*align-content:...text-align: center; font-size: 30px; background: red; } ul>li:nth-child...(2){ background: green; } ul>li:nth-child(3){ background: blue

6402 0

CSS隐藏元素的几种方式

(经小伙伴评论提醒，后来加的内容) 回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段...: blue; } 元素会在页面中保留位置，并没有几何位置属性的变化，所以并不会触发回流，会重绘。...div:nth-child(2) { opacity: 0; background-color: blue; } 元素会在页面中保留位置，并没有几何位置属性的变化，所以并不会触发回流，...: blue; } transform属性不会触发回流、重绘。...简单地说下为什么transform属性为什么不会触发回流、重绘。

2K2 0

css3选择器

，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的 E[...nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/匹配奇数行/ p:nth-child(even){background:red...注意：子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type...表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。...注意：子节点不包含文本节点 E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。

4302 0

CSS3

/*选择具有att属性的E元素*/ .con p[class]{ background: pink; } /*选择具有att属性且属性值等于...*/ .con p[class="two"]{ color: white; } /*选择具有att属性且属性值为以val结尾的字符串的...*/ .con p[class$="one"]{ color: deepskyblue; } /*选择具有att属性且属性值为以val...，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。...*/ .con p[class|="three"]{ color: white; } /*选择具有att属性且属性值为包含val的字符串的

5511 0

关于java实体类Bean中的属性名第一个字母为什么要小写？

因为针对属性名自动生成的get和set方法中默认返回的是小写的属性名。假设你属性名是name，然后生成的get和set方法分别为，getName（）和setName()。...但是如果你属性名字是Name，生成的get和set方法还是getName（）和setName()。但是程序会自动默认你传过来的属性是小写的name。然后就会报错，找不到你想要的大写的Name的值。

8842 0

CSS选择器详解

} 选定具有属性 attr 且属性值为用空格分隔的字词列表，其中有一个等于 val （包含只有一个值且该值等于 val 的情况）的文档元素 E /** 设置 class 属性有一个值为 div1 的元素为红色...attr 且属性值以 val 开头并用连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的文档元素 E /** 设置 class 属性的值以 head 开头并用连接符 "-" 分隔的元素为红色...要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 /** 该规则当元素中只有一个 li 有效，即可设置 li 为红色，如果有多个 li 则无效...(n) CSS3 E:nth-child(n) { sRules } 要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素匹配父元素的第 n...E:nth-child(even) 选择偶数子元素，E:nth-child(old) 选择奇数子元素 /* 偶数或者 E:nth-child(even) */ li:nth-child

2.8K4 0

妙用CSS变量，让你的CSS变得更心动

前言「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。...谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。...(--width) * 10px 作用域范围：在当前元素块作用域及其子元素块作用域下有效优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器...如果多个CSS属性依赖一个变量赋值，那么使用「CSS变量」赋值到style上就更方便了，那些CSS属性可在CSS文件里进行计算与赋值，这样可帮助JS分担一些属性计算工作。...没有做不到，只有想不到，尽情发挥你的想象力啦。之前在CodePen上还看到一个挺不错的栗子，一个悬浮视差按钮，具体代码涉及到一些3D变换的知识。

9113 0

CSS选择器如此之多，你了解多少？

[attribute] [target] 选择带有 target 属性所有元素。 ?...:only-child p:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素 ?...:only-of-type p:only-of-type 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的 ?...:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。 ?...:nth-child(odd)或者:nth-child(2n+1) 奇数行、:nth-child(even)或者:nth-child(2n+2) 偶数行 ?

4652 0

3d效果的图片轮播

CSS3的3d变换 CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。 ...但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。...perspective属性取值为：none|number。当值为数字时，意味着该元素与我们眼睛之间的距离为该值。...该属性定义在需要3d变换的元素的父元素上，声明该属性意味着定义了一个3d空间，值越小，3d效果越明显。...综上来看，transform-style可以为子元素创建3d空间，perspective可以设置视距（透视视深），而且该值只对第一个子元素有效。

2.1K5 0

前端成神之路-HTML5CSS3_01

一、什么是 HTML5 HTML5 的概念与定义定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML...语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储...六、新增表单属性 ?...七、CSS3 属性选择器(上) 八、CSS3 属性选择器(下) 九、结构伪类选择器十、nth-child 参数详解 nth-child 详解注意：本质上就是选中第几个子元素 n 可以是数字...重点知识点 2D 的移动主要是指水平、垂直方向上的移动 translate 最大的优点就是不影响其他元素的位置 translate 中的100%单位，是相对于本身的宽度和高度来进行计算的行内标签没有效果

4311 0

第97天：CSS3渐变和过渡详解

一、渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。...可分为线性渐变、径向渐变 1、线性渐变（gradient 变化）　linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。...div> 56 57 58 59 运行效果： 2、径向渐变 radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果...如电影胶片　　特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。...如果所有属性都过渡，可以使用transition-property:all; 1 .box{ 2 width: 200px; 3 height:

4953 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云