CSS规则中第n个子元素的索引？
在CSS规则中，可以使用伪类选择器:nth-child(n)来选择元素的第n个子元素。其中，n可以是一个具体的数字，也可以是关键词odd（奇数）或even（偶数）。
例如，如果想选择一个父元素下的第三个子元素，可以使用:nth-child(3)。
这个选择器在前端开发中非常有用，可以用于样式的定位和调整。它可以帮助开发人员根据元素在父容器中的位置来应用不同的样式。
应用场景：
- 列表样式：可以使用:nth-child(n)选择器来为列表中的特定项应用不同的样式，例如为奇数项和偶数项设置不同的背景色。
- 网格布局：在网格布局中，可以使用:nth-child(n)选择器来为不同位置的网格单元格设置样式，例如设置特定位置的边框样式。
- 导航菜单：可以使用:nth-child(n)选择器来为导航菜单中的特定项设置样式，例如为当前选中的菜单项添加特殊样式。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云CSS规则中第n个子元素的索引与云计算领域无直接关联，因此无法提供腾讯云相关产品和产品介绍链接地址。
相关·内容
1回答
使用子选择器的菜单css
css、menu
我有以下菜单：
<ul class="top-menu">
<li><a_href="/Products" title="Products"><span>Products</span></a><ul>
<li><a_href="/Products/List" title="Product List"><span>Product List</span></a></li&
浏览 4提问于2010-07-30得票数 0
回答已采纳
2回答
嵌套的<ul>奇/偶css
html、css、html-lists
我们有嵌套的无序列表和产品数据。为
<ul class="data_holder">
我们想要奇数/偶数背景色。
ul.data_holder:odd => background: #ccc
ul.data_holder:even => background: #FFF
我们的整个结构看起来像这样(如您所见，我们的ul.data_holder位于父无序列表的"li“元素中：
<ul class="row_holder">
<li class="row">
<ul class=&
浏览 28提问于2019-10-24得票数 0
回答已采纳
2回答
在某些网格位置有目标元素的选择器吗？
html、css、css-selectors、css-grid
我有一个CSS网格，里面有一堆自动流的网格项目。有时网格项是1×1轨道，有时是2×2轨道，所以我从源顺序中不知道哪些项将在网格中处于特定位置。这意味着使用:nth-child()进行样式设计是不可靠的。
我想将样式添加到某些网格列(主要是最后一列)中的项中。是否有CSS选择器可以让我对这些项目进行样式设计？
例如，在这个演示中，我将如何样式框3，5和9，()？
.grid-container {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
浏览 2提问于2017-05-24得票数 11
2回答
通用选择器和第n个子选择器之间的差异，以获取所有直接子选择器？
css、performance、css-selectors
我想知道，在css中获取每个直接子元素是否有区别
tag > *
和
tag > :nth-child(n)
我知道通用选择器很慢，但我不知道第n个子选择器在幕后做什么。
浏览 1提问于2017-07-07得票数 0
1回答
jQuery :奇数和:第n个子CSS3不同
jquery、css、jquery-selectors、css-selectors
我发现奇数选择器和奇子数( CSS3 )的工作原理不同。
在黄色中，它是CSS第n个孩子(奇数)，如果你取消对JS的注释并在CSS中注释background: found，你会发现它是以另一种方式找到的。
有谁能说出我如何用CSS3实现与jQuery相同的结果？
谢谢!
浏览 1提问于2012-04-06得票数 2
回答已采纳
如何通过远程(用于Android )使网格视图具有可单击的网格项和嵌套视图(按钮、图像)
我只想单击“能够”的图像，如果我通过远程导航(而不是通过触摸)在按钮上导航，则应该添加网格视图项中的按钮来播放我的列表。
谢谢！
如果网格视图项有两个子项图像按钮和另一个按钮，如何浏览网格视图子项中的d
浏览 1提问于2015-01-05得票数 0
3回答
如何在Bootstrap 3中更改行的颜色？
html、css、twitter-bootstrap、twitter-bootstrap-3
我想改变Bootstrap 3网格中交替行的背景颜色。我想我可以创建一些CSS并将其添加到div中的类中，但颜色不变。
这是我的CSS：
.row-buffer {
margin-top:20px;
margin-bottom:20px;
}
.row-even {
background-color:#76A0D3;
}
.row-odd {
background-color:#BDE3FB;
}
我的行是这样定义的：
<div class="row row-buffer row-even">
或者：
<div class="row row-buff
浏览 0提问于2013-11-16得票数 9
回答已采纳
2回答
Javascript:为在函数中创建的表格的行甚至单元格着色
javascript、function、colors、cell
目前我的JS函数有一点问题。 本质上，这个游戏的目的是以这样一种方式设置代码:只有在偶数行和偶数单元格上，表格中的圆圈才会被涂成黄色，而其余的则保持绿色。 我现在把它显示成这样： How it shows when previewing the HTML file 圆圈周围的红色方块表示需要用黄色而不是绿色着色的偶数行/偶数单元格。 下面是我的代码： <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<style>
body {
浏览 33提问于2020-01-14得票数 0
回答已采纳
1回答
jquery当前可见的第n个子对象
jquery、css-selectors
我可以像这样设置每四个'item‘div的样式
jQuery(".item:nth-child(4n)").addClass("fourth-item");
这很好用，但是我隐藏了一些项目，显示了其他一些项目，并想要重新设置样式，但只对每四个可见的项目设置样式。因此，我有一个函数可以删除这个样式并重新应用它，但我需要在样式的重新应用中指定它是每四个可见项，而不是每四个项。我知道":visible“选择器，但不能正确地将它与第n个子选择器链接，有什么想法吗？
我试过这样的各种方法，但都没有用。
jQuery(".item").r
浏览 1提问于2010-02-01得票数 11
回答已采纳
8回答
CSS可以检测一个元素的子元素的数量吗？
css、css-selectors
我可能是在回答我自己的问题，但我非常好奇。
我知道CSS可以选择父级的单个子级，但是如果它的父级有一定数量的子级，是否支持设置容器的子级的样式。
例如
container:children(8) {
// style the parent this way if there are 8 children
}
我知道这听起来很奇怪，但是我的经理让我去检查一下，我自己没有找到任何东西，所以我决定在结束搜索之前求助于so。
浏览 35提问于2012-01-04得票数 366
回答已采纳
1回答
在第n个子代中使用SASS变量？
sass
我有一个缩略图的网格设置，目前每行4个拇指。为了确保它们排列整齐，我提供了以下代码片段：
li:nth-child(5) { margin-left: 0;}
我试图这样做，但是我得到了一个语法错误：
$galleryGrid: 5;
li:nth-child($galleryGrid) { margin-left: 0;}
如果我想将第n个子代改为使用另一个值，例如10 (这样我就可以连续拥有8个拇指)，我假设这是可行的。这是不可能的，还是我做得不对？！
提前感谢您的帮助。
浏览 1提问于2012-10-03得票数 27
回答已采纳
3回答
如何选择带nth-child()的div？
html、css、css-selectors
我有这样的HTML结构：
<section id="main-content" class="photo-grid">
<h2>Photos</h2>
<div class="col-1-4">
<a href="#">
<p>File 503</p>
<img src="#" />
<
浏览 1提问于2014-05-16得票数 1
回答已采纳
1回答
我有一个网页代码生成的乘法(内置角)。这是一个菜单选择，我需要隐藏其中一些。例如，如下所示：
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
现在我需要的是隐藏div，它包含一个
浏览 0提问于2018-10-12得票数 1
回答已采纳
1回答
在Bootstrap中显示特定选项卡
twitter-bootstrap
我对javascript缺乏以下方面的知识。我有一个导航选项卡菜单，有5个不同的选项卡，可以展开。但我希望当页面加载一个特定的选项卡(基于上一页或url中的参数)时被展开。在bootstrap页面上，他们有以下示例：
<script> $(function () { $('#myTab a:last').tab('show'); }) </script>
我的问题是，我不知道'a‘是什么，我不能让它传递一个参数，比如我要显示的第二个标签。如果我传递的是integer或#reference而不是'last‘，
浏览 1提问于2012-09-13得票数 0
回答已采纳
3回答
响应式设计中的第n个子“碰撞”/创建流体栅格
css、responsive-design、fluid-layout、css-selectors
我有一个网格系统为我的网站，这是最初设置的样式应用到网格中的每六个项目
li:nth-child(5n+1){ margin-left:0 }
我正在使我的站点具有响应性，并且我在其中指定了一个断点
li:nth-child(3n+1){ margin-left:0 }
但问题是，它仍然在解释以前的5n+1风格，这是我不想要的。我如何告诉CSS忽略该样式。或者更好的是，我如何创建一个fluid网格，以便每当安莉项目是一行中的第一个项目时，它的左边距为0，而所有其他项的左边距为25px？
浏览 2提问于2013-03-12得票数 5
回答已采纳
6回答
级联多个CSS
javascript、html、css、frontend
假设我有这个html：
<div class="div">
<div class="sub-div"></div>
<div class="sub-div"></div>
<div class="extra-sub-div"></div>
</div>
目前，如果我想得到第二个子div，我可以这样做：
.div .sub-div:nth-child(2) {
attribute: value;
(...)
浏览 4提问于2022-04-12得票数 2
回答已采纳
3回答
Android布局相对vs框架
android、android-relativelayout、android-framelayout
我有一个应用程序，我想实现一个布局，其中产品图像将在背景和顶部的右下角，我想把产品的价格和左下角我想要放置一个添加按钮。
我应该使用框架布局还是相对布局？
浏览 3提问于2011-12-27得票数 3
5回答
使用第n个子对象每隔两个div
css、css-selectors
我尝试使用第n个子元素来选择每隔两个div。
这意味着，当有div 1、2、3、4、5和6的集合时，我需要选择1、2、5和6。每隔两个。
CSS：
#navigation .menuItem:nth-child(3n+3) {
background-color: #ccc;
}
HTML：
<div class="menuItemWrapper">
<div class="menuItem"><a href="shop.html">Shop Online</a><
浏览 3提问于2013-04-19得票数 2
6回答
使用特定颜色的li元素进行绘制
javascript、jquery、html、css
我有这个html结构：
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
我需要按照下面的顺序将li元素涂成红色。
1、3、7、11等
请记住，li元素是动态生成的。
浏览 0提问于2012-02-24得票数 1
回答已采纳
2回答
如何在ul标签中使用nth-of-type设置样式？
css、css-selectors
如何对包含在nth-of-type的<li>元素中的<span>元素使用<ul> css选择器
我原本期望span:nth-of-type(odd)和span:nth-of-type(even)能够工作，但他们没有。
span:nth-of-type(even) {
background-color: grey;
}
span:nth-of-type(odd) {
background-color: blue;
}
<ul>
<li>
<span>Test 1</span>
浏览 1提问于2012-10-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
