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
相关·内容
有人知道为什么只有.responstable tr:nth-child(4n+2)内部的background-color: #f2eaea;在工作吗？border: 19px solid #e6d9d9;并非如此，我不明白为什么。(2) {} display: none;.responst
浏览 10提问于2018-01-09得票数 0
基本上，我已经给了我的<body>一个颜色(blue)，并且我希望在不使用id的情况下使主体中的一个标头(<h3>)变成不同的颜色(green)。我试图使所有的<h3>标题成为一个特定的颜色。
浏览 4提问于2015-10-21得票数 0
回答已采纳
我有一个极图，我试图在x轴上移动四个标签中的两个。它是一个狭小空间中的菱形形状，所以左边和右边的标签都被剪掉了。我试着移动他们，但是我不能让他们移动。
浏览 0提问于2018-08-09得票数 4
回答已采纳
1回答
我想检查我的div (使用id#row1)中的每个div是否都将属性“指针-事件”设置为"none“。只有当所有人都拥有这个属性时，才能做一些事情。我的做法很糟糕，但效果很好：
if( $('#row1 div:nth-child(2)').css("pointer
浏览 0提问于2016-07-15得票数 0
回答已采纳
2回答
只有当你悬停在视频上，它才会开始播放。我的代码如下： $('.service:nth-child(1) a video#bgvid').get(0).play(); $('.service:nth-child(1) a video#bgvid').get(0).pause();我使用了:nth-child</e
浏览 10提问于2015-05-02得票数 5
回答已采纳
3回答
div></div>$(function(){});
上面我写了.b:nth-child(2)，为什么我不能选择class="b"的
浏览 0提问于2012-06-15得票数 0
回答已采纳
下面的代码位于我的一个页面对象中，并且部分工作。因此，我用来识别给定行中的文本的两段代码(主要是)起作用，单击“那”行中的复选框的代码也有效。<<<<<<>>>>>> 更新
有人能帮我理解为什么不能
浏览 4提问于2020-09-12得票数 1
回答已采纳
我正在用Selenium测试一个包含表的网页。我想通过CSS选择器验证表格单元格(行、列)中的文本。表的HTML结构非常简单。下面是表的示例，其中每一行代表一个人的不同属性： <head> <body> <table表tr：(‘AGE’) td:nth-child(3)
当我将这些方法导出为JUnit代码时，问题就
浏览 2提问于2012-04-09得票数 0
我有一个任务是在HTML表tr元素上使用querySelectorAll，使用第n个子元素为偶数和奇数打印不同的颜色，但只有偶数有效。下面是我的代码 我还收到了这样的错误：“未捕获样式:无法读取未定义的属性‘TypeError’”， <!function execute() { var odd = document.querySelectorAll("tbody tr:nth-child(odd)
浏览 10提问于2021-03-25得票数 2
回答已采纳
2回答
每个div的增量z-索引
、、、
我正在设计一个div重叠的设计，并且我要为类的每个成员分别增加1的z-index。我觉得用jquery做这件事有一个更好的方法。我想要的是，对于类section的每个div，有一个比以前更大的z-index，但不被不是特定类的成员的div抛出，例如
<div class="section" style="z-index:1">Lorem
浏览 4提问于2014-10-23得票数 3
回答已采纳
在浏览器中检查页面时，只有两个区段元素以高度呈现。 text-align: center; }
section
浏览 2提问于2020-07-05得票数 0
2回答
自从HTML5加入以来，关于这个问题有什么变化吗？ <style> .altTable .row2 td { background-color: #EEE; } <thead><tr><td></td></tr></thea
浏览 0提问于2010-12-31得票数 1
1回答
我创建了一个带有内联元素的列表，以便将它们水平居中放置在多行上。虽然下面的代码在Chrome和Firefox中有效，但在Safari中伪属性不起作用。:格式较少) margin: 0 auto; li { &:nth-child(4):after { display: block;
浏览 0提问于2013-05-30得票数 0
我有一个简单的HTML和jQuery设置，以便在用户单击所需的主题时隐藏行，因此只有单击的主题仍然是可见的。我的问题是，尽管脚本正在运行，但我不知道为什么通过jQuery文档并不能真正帮助我理解这一点。if (topic != 'All') { return $(this).children(':nth-chi
浏览 7提问于2015-02-16得票数 1
回答已采纳
我试着每行显示4个盒子。box1 box2 box3 box4.我只使用了flexbox方法。下面是我正在使用的HTML和CSS代码。.parent { flex-wrap: wrap; flex: 1 0 21%;<div class="parent"> <div class="child">
<div
浏览 0提问于2019-11-26得票数 0
我有个问题：:nth-child(n):before有效吗？为什么下面的代码不能工作？@for $i from 1 through 4 background: url(../../img/block-img-#{$i}.jpg)它正在编译如下：
.content .cnt1 .block:nth-child(1):b
浏览 3提问于2017-01-24得票数 1
回答已采纳
我试图在具有css属性li设置的ul元素中的每个ul元素中添加一个上限。出于某种原因，除第二列中的第一个元素外，每个li元素的边距都有效：ul { padding: 0; margin-top: 10px; background-color: red; background-co
浏览 0提问于2018-03-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
