tokenpocketapp下载安卓最新版本|nth

:nth-child() - CSS：层叠款式表 | MDN

-child() - CSS：层叠款式表 | MDNSkip to main contentSkip to searchSkip to select languageMDN Web DocsOpen main menuReferencesReferencesOverview / Web TechnologyWeb technology reference for developersHTMLStructure of content on the webCSSCode used to describe document styleJavaScriptGeneral-purpose scripting languageHTTPProtocol for transmitting web resourcesWeb APIsInterfaces for building web applicationsWeb ExtensionsDeveloping extensions for web browsersWeb TechnologyWeb technology reference for developersGuidesGuidesOverview / MDN Learning AreaLearn web developmentMDN Learning AreaLearn web developmentHTMLLearn to structure web content with HTMLCSSLearn to style content using CSSJavaScriptLearn to run scripts in the browserAccessibilityLearn to make the web accessible to allPlusPlusOverviewA customized MDN experienceAI Help (beta)Get real-time assistance and supportUpdatesAll browser compatibility updates at a glanceDocumentationLearn how to use MDN PlusFAQFrequently asked questions about MDN PlusCurriculumNewBlogPlayAI Help BetaSearch MDNClear search inputSearchThemeLog inSign up for freeWeb 开发技能CSS：层叠款式表:nth-child()Article Actions中文 (简体)此页面由社区从英文翻译而来。了解更多并参加 MDN Web Docs 社区。Filter sidebarClear filter inputIn this article检验一下语法示例标准浏览器兼容性拜见

CSS

教程

CSS 根底

CSS 第一步

CSS 第一步概述

什么是 CSS

CSS 入门

CSS 的结构是怎样的

CSS 是怎么作业的

检验：为列传页面增加款式

CSS 构建

CSS 构建根底概述

CSS 挑选器

类型、类和 ID 挑选器

特点挑选器

伪类与伪元素

联络挑选器

层叠、优先级与承继

层叠层

盒子模型

布景和边框

处理不同方向的文本

溢出的内容

CSS 的值和单位

在 CSS 中调整巨细

图画、媒体和表单元素

款式化表格

调试 CSS

安排你的 CSS

检验：根本的 CSS 了解

检验：创立精巧的信纸

检验：一个美丽的盒子

款式化文本

款式化文本概述

根底文本与字体款式化

款式化列表

款式化链接

Web 字体

检验：排版社区大学主页

CSS 布局概述

CSS 布局概述

CSS 布局简介

一般的流布局

弹性盒布局

网格布局

起浮布局

定位

多栏式布局

呼应式布局

媒体查询入门攻略

传统的布局办法

支撑旧版浏览器

检验：对布局根底知识的了解

参阅

ModulesCSS animationsCSS backgrounds and bordersCSS basic user interfaceCSS box alignmentCSS box modelCSS cascade and inheritance (en-US)CSS custom properties for cascading variables (en-US)CSS color adjustment (en-US)CSS colorsCSS compositing and blending (en-US)CSS conditional rules (en-US)CSS containmentCSS counter stylesCSS display (en-US)CSS filter effects (en-US)CSS flexible box layoutCSS font loading (en-US)CSS fontsCSS fragmentationCSS generated contentCSS grid layoutCSS images (en-US)CSS lists and counters (en-US)CSS logical properties and valuesCSS maskingCSS media queriesCSS miscellaneous (en-US)CSS motion path (en-US)CSS multi-column layoutCSS namespaces (en-US)CSS nesting (en-US)CSS overflow (en-US)CSS overscroll behavior (en-US)CSS paged mediaCSS positioned layoutCSS properties and values API (en-US)CSS pseudo-elements (en-US)CSS ruby layout (en-US)CSS scoping (en-US)CSS scroll-driven animations (en-US)CSS scroll snapCSS scrollbars stylingCSS selectorsCSS shadow parts (en-US)CSS shapesCSS syntax (en-US)CSS tableCSS textCSS text decorationCSS transformsCSS transitionsCSS writing modesCSSOM view

Properties-moz-*-moz-float-edge (en-US)

非标准

已弃用

-moz-force-broken-image-icon (en-US)

非标准

已弃用

-moz-image-region (en-US)

非标准

-moz-orient (en-US)

非标准

-moz-user-focus (en-US)

非标准

已弃用

-moz-user-input

非标准

已弃用

-webkit-*-webkit-border-before

非标准

-webkit-box-reflect

非标准

-webkit-line-clamp-webkit-mask-attachment

非标准

-webkit-mask-box-image (en-US)

非标准

-webkit-mask-composite (en-US)

非标准

-webkit-mask-position-x (en-US)

非标准

-webkit-mask-position-y (en-US)

非标准

-webkit-mask-repeat-x (en-US)

非标准

-webkit-mask-repeat-y (en-US)

非标准

-webkit-overflow-scrolling

非标准

-webkit-tap-highlight-color

非标准

-webkit-text-fill-color-webkit-text-security (en-US)

非标准

-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-touch-callout

非标准

accent-coloralign-*align-contentalign-itemsalign-selfalign-tracks (en-US)

实验性

allanimation-*animationanimation-composition (en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-range (en-US)

实验性

animation-range-end (en-US)

实验性

animation-range-start (en-US)

实验性

animation-timeline (en-US)

实验性

animation-timing-functionappearanceaspect-ratiobackdrop-filterbackface-visibilitybackground-*backgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-sizeborder-*borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radius (en-US)border-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-*box-align (en-US)

非标准

已弃用

box-decoration-breakbox-direction (en-US)

非标准

已弃用

box-flex (en-US)

非标准

已弃用

box-flex-group (en-US)

非标准

已弃用

box-lines (en-US)

非标准

已弃用

box-ordinal-group (en-US)

非标准

已弃用

box-orient

非标准

已弃用

box-pack (en-US)

非标准

已弃用

box-shadowbox-sizingbreak-*break-afterbreak-before (en-US)break-insidecaption-sidecaret-colorclearclip

已弃用

clip-pathcolor-*colorcolor-interpolation (en-US)color-schemecolumn-*column-countcolumn-fill (en-US)column-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-width (en-US)columnscontain-*containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainer-*container (en-US)container-name (en-US)container-type (en-US)contentcontent-visibility

实验性

counter-*counter-incrementcounter-resetcounter-setcursordirectiondisplayempty-cellsfilterflex-*flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont-*fontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizing (en-US)font-palettefont-sizefont-size-adjustfont-smooth

非标准

font-stretchfont-stylefont-synthesisfont-synthesis-position (en-US)font-synthesis-small-caps (en-US)font-synthesis-style (en-US)font-synthesis-weight (en-US)font-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asian (en-US)font-variant-emoji (en-US)font-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightforced-color-adjust (en-US)gapgrid-*gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-end (en-US)grid-column-start (en-US)grid-rowgrid-row-end (en-US)grid-row-start (en-US)grid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphenate-character (en-US)hyphenate-limit-chars (en-US)hyphensimage-*image-orientationimage-renderingimage-resolution (en-US)

实验性

initial-letter (en-US)

实验性

initial-letter-align (en-US)

实验性

inline-sizeinset-*insetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startisolationjustify-*justify-contentjustify-itemsjustify-selfjustify-tracks (en-US)

实验性

leftletter-spacingline-*line-breakline-heightline-height-step (en-US)

实验性

list-*list-stylelist-style-imagelist-style-positionlist-style-typemargin-*marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim (en-US)

实验性

mask-*maskmask-bordermask-border-modemask-border-outset (en-US)mask-border-repeatmask-border-slicemask-border-source (en-US)mask-border-widthmask-clip (en-US)mask-composite (en-US)mask-imagemask-modemask-origin (en-US)mask-position (en-US)mask-repeatmask-size (en-US)mask-type (en-US)masonry-auto-flow (en-US)

实验性

math-*math-depth (en-US)math-shift (en-US)

实验性

math-style (en-US)max-*max-block-size (en-US)max-heightmax-inline-sizemax-widthmin-*min-block-sizemin-heightmin-inline-sizemin-widthmix-blend-modeobject-fitobject-positionoffset-*offsetoffset-anchor (en-US)offset-distance (en-US)offset-path (en-US)offset-position (en-US)offset-rotate (en-US)opacityorderorphans (en-US)outline-*outlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflow-*overflowoverflow-anchoroverflow-blockoverflow-clip-margin (en-US)overflow-inlineoverflow-wrapoverflow-xoverflow-yoverlay (en-US)

实验性

overscroll-*overscroll-behavioroverscroll-behavior-block (en-US)overscroll-behavior-inline (en-US)overscroll-behavior-xoverscroll-behavior-ypadding-*paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-*page (en-US)page-break-afterpage-break-before (en-US)page-break-inside (en-US)paint-orderperspectiveperspective-originplace-*place-contentplace-itemsplace-self (en-US)pointer-eventspositionprint-color-adjust (en-US)quotesresizerightrotaterow-gapruby-align (en-US)

实验性

ruby-position (en-US)scalescroll-*scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-timeline (en-US)

实验性

scroll-timeline-axis (en-US)

实验性

scroll-timeline-name (en-US)

实验性

scrollbar-*scrollbar-colorscrollbar-gutter (en-US)scrollbar-widthshape-*shape-image-thresholdshape-marginshape-outsidetab-sizetable-layouttext-*text-aligntext-align-lasttext-combine-upright (en-US)text-decorationtext-decoration-colortext-decoration-linetext-decoration-skip

实验性

text-decoration-skip-ink (en-US)text-decoration-styletext-decoration-thicknesstext-emphasis (en-US)text-emphasis-color (en-US)text-emphasis-position (en-US)text-emphasis-style (en-US)text-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjust

实验性

text-transformtext-underline-offsettext-underline-positiontext-wrap (en-US)timeline-scope (en-US)

实验性

toptouch-actiontransform-*transformtransform-boxtransform-origintransform-styletransition-*transitiontransition-behavior (en-US)transition-delaytransition-durationtransition-propertytransition-timing-functiontranslateunicode-bidiuser-modify (en-US)

非标准

已弃用

user-selectvertical-alignview-*view-timeline (en-US)

实验性

view-timeline-axis (en-US)

实验性

view-timeline-inset (en-US)

实验性

view-timeline-name (en-US)

实验性

view-transition-name

实验性

visibilitywhite-spacewhite-space-collapse (en-US)widowswidthwill-changeword-breakword-spacingwriting-modez-indexzoom (en-US)

非标准

SelectorsAttribute selectorsClass selectorsID selectors& nesting selector (en-US)Type selectorsUniversal selectors

CombinatorsChild combinatorColumn combinator

实验性

Descendant combinatorNamespace separator (en-US)Next-sibling combinatorSelector listSubsequent-sibling combinator

Pseudo-classes:-moz-broken

非标准

:-moz-drag-over

非标准

:-moz-first-node

非标准

:-moz-handler-blocked (en-US)

非标准

:-moz-handler-crashed (en-US)

非标准

:-moz-handler-disabled (en-US)

非标准

:-moz-last-node (en-US)

非标准

:-moz-loading (en-US)

非标准

:-moz-locale-dir(ltr) (en-US)

非标准

:-moz-locale-dir(rtl) (en-US)

非标准

:-moz-only-whitespace

非标准

:-moz-submit-invalid (en-US)

非标准

:-moz-suppressed (en-US)

非标准

:-moz-user-disabled (en-US)

非标准

:-moz-window-inactive

非标准

:active:any-link:autofill:blank

实验性

:buffering (en-US):checked:current (en-US):default:defined:dir():disabled:empty:enabled:first:first-child:first-of-type:focus:focus-visible:focus-within:fullscreen:future (en-US):has():host:host-context():host():hover:in-range:indeterminate:invalid:is():lang():last-child:last-of-type:left:link:local-link (en-US):modal (en-US):muted (en-US):not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:past (en-US):paused:picture-in-picture:placeholder-shown:playing:popover-open (en-US):read-only:read-write:required:right:root:scope:seeking (en-US):stalled (en-US):state() (en-US)

实验性

:target:target-within (en-US)

实验性

:user-invalid (en-US):user-valid (en-US):valid:visited:volume-locked (en-US):where()

Pseudo-elements::-moz-color-swatch (en-US)

非标准

::-moz-focus-inner (en-US)

实验性

::-moz-list-bullet (en-US)

非标准

::-moz-list-number (en-US)

非标准

::-moz-page (en-US)

非标准

::-moz-page-sequence (en-US)

非标准

::-moz-progress-bar

非标准

::-moz-range-progress

非标准

::-moz-range-thumb (en-US)

非标准

::-moz-range-track (en-US)

非标准

::-moz-scrolled-page-sequence (en-US)

非标准

::-webkit-inner-spin-button (en-US)

非标准

::-webkit-meter-bar (en-US)

非标准

::-webkit-meter-even-less-good-value (en-US)

非标准

::-webkit-meter-inner-element (en-US)

非标准

::-webkit-meter-optimum-value (en-US)

非标准

::-webkit-meter-suboptimum-value (en-US)

非标准

::-webkit-progress-bar

非标准

::-webkit-progress-inner-element

非标准

::-webkit-progress-value

非标准

::-webkit-scrollbar

非标准

::-webkit-search-cancel-button (en-US)

非标准

::-webkit-search-results-button (en-US)

非标准

::-webkit-slider-runnable-track

实验性

::-webkit-slider-thumb

实验性

::after::backdrop::before::cue::cue-region (en-US)::file-selector-button::first-letter::first-line::grammar-error::highlight() (en-US)::marker::part()::placeholder::selection::slotted()::spelling-error::target-text

实验性

::view-transition

实验性

::view-transition-group

实验性

::view-transition-image-pair

实验性

::view-transition-new

实验性

::view-transition-old

实验性

At-rules@charset@color-profile (en-US)@container (en-US)@counter-style@document

非标准

已弃用

@font-face@font-feature-values@font-palette-values (en-US)@import@keyframes@layer@media@namespace@page@property@scope (en-US)@starting-style (en-US)

实验性

@supports

Functions-moz-image-rect

非标准

已弃用

abs() (en-US)acos()asin()atan()atan2()attr()calc()clamp()cos()counter()counters()cross-fade() (en-US)element()

实验性

env()exp()fit-content()hypot()log()max()min()minmax()mod() (en-US)path() (en-US)pow()ray() (en-US)rem() (en-US)repeat()round() (en-US)sign() (en-US)sin()sqrt()symbols() (en-US)tan()url()var()

Types (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US) (en-US)

已弃用

攻略

动画

运用 CSS 动画

布景和边框

多个布景的运用

重设布景图片的巨细

盒子的对齐办法

块布局中的盒对齐办法

弹性盒布局中的盒对齐办法

网格布局中的盒模型对齐 (en-US)

多栏式布局中的盒对齐办法 (en-US)

盒模型

CSS 根本盒模型简介

外边距堆叠

颜色

运用 CSS 为 HTML 元素增加颜色

Web 无障碍：了解颜色和亮度 (en-US)

Web 无障碍：颜色对比度 (en-US)

多列

多栏式布局的根底概念

多栏式布局的款式

多栏式布局中的跨列与平衡 (en-US)

处理多栏式布局的溢出

多栏式布局中的内容换行 (en-US)

条件规矩

运用特性查询

Containment

Using CSS containment (en-US)

CSS 容器查询

Using container size and style queries (en-US)

CSS 目标模型视图

坐标系

弹性盒布局

弹性盒布局根底

与其他布局的比较

弹性盒容器中的对齐办法

弹性盒布局中的排序办法

操控弹性盒子元素在主轴上的份额

包装弹性盒布局中的元素

经典的弹性盒布局示例

流式布局

一般的流式布局中的块式和行式布局

运用或脱离流式布局

格式化上下文简介

流式布局和书写形式

流式布局和溢出

字体

OpenType 字体特性攻略

可变字体攻略

网格布局

网格布局根底概念

和其他布局办法的联络

依据网格线的定位

网格模板区域

运用命名线布局

网格布局中的主动定位

网格布局中的盒模型对齐

网格、逻辑值和书写形式

网格布局和无障碍

网格布局和渐进增强

运用网格布局完成常见布局

子网格 (en-US)

Masonry 布局 (en-US)

图片

运用 CSS 突变

列表和计数器

运用 CSS 计数器

使列表缩进共同

逻辑特点

根底概念

起浮和定位

内外边距和边框

调整尺度

数学函数

运用 CSS 数学函数 (en-US)

媒体查询

运用媒体查询

无障碍相关的媒体查询 (en-US)

运用编程办法测验媒体查询

Printing

嵌套款式规矩

运用 CSS 嵌套 (en-US)

嵌套 @ 规矩 (en-US)

嵌套与优先级 (en-US)

定位

了解 CSS z-index

翻滚吸附

翻滚吸附的根本概念

形状

形状概述

运用 box 值指定形状

根本形状 (en-US)

从图片中指定形状 (en-US)

文本

包装文本和文本断行 (en-US)

改换

运用改换

过渡

运用过渡

布局手册

媒体目标

多列

居中一个元素

粘性页脚

分离式导航

面包屑导航

带有图标的列表 (en-US)

分页 (en-US)

卡片

网格布局包装器 (en-US)

东西

取色器

Box shadow 生成器

图片边框生成器

圆角边框生成器

In this article检验一下语法示例标准浏览器兼容性拜见:nth-child()CSS :nth-child() 伪类依据元素在父元素的子元素列表中的索引来挑选元素。换言之，:nth-child() 挑选器依据父元素内的一切兄弟元素的方位来挑选子元素。检验一下

补白： 在 element:nth-child() 的语法中，子元素的计数包含任何元素类型的兄弟子元素；可是只有当该子元素方位上的元素与挑选器的其他组件匹配时，才被视为匹配。

语法:nth-child() 以一个参数来描绘匹配兄弟元素列表中元素索引的形式。元素索引从 1 开端。

css:nth-child( [of ]?) {

/* ... */

}

关键字值

odd

表明元素在兄弟元素列表中的方位是奇数：1、3、5……。

even

表明元素在兄弟元素列表中的方位是偶数：2、4、6……。

函数符号

表明元素在兄弟元素列表中的方位是 An+B 形式的元素，其间 n 为正整数或 0，A 和 B 为整数，且 A 不为 0。其间：

A 是整数步长，

B 是整数偏移量，

n 是从 0 开端的一切非负整数。

它能够被了解为列表中的第 An+B 个元素。A 和 B 有必要都是 值。

of 语法经过传递一个挑选器参数，咱们能够挑选与该挑选器匹配的第 n 个元素。例如，下面的挑选器匹配前三个设置了 class="important" 的列表项。

css:nth-child(-n + 3 of li.important) {

}

这与将挑选器移到函数之外不同，如：

cssli.important:nth-child(-n + 3) {

}

该挑选器会匹配归于前三个子元素，且与挑选器 li.important 匹配的列表项。示例挑选器示例

tr:nth-child(odd) or tr:nth-child(2n+1)

表明 HTML 表格中的奇数行：1、