This CSS tutorial explains how to use the CSS selector called :nth-child with syntax and examples. The CSS :nth-child selector allows you to target an element that is the nth child element within its parent.
li:last-child { background-color: red; } 3）:nth-child(n)：选取父元素中第n个子元素。示...
selector:nth-child(n) 找到这样的元素,它是第n个子元素,且匹配selector selector:nth-of-type(n) 找到这样的元素,它是统一标记类型的第n个元素,且匹配selector 《未完》
--CSS Styles--><style>p:nth-child(even)/*apply the styles to only even paragraphs content*/{background:red;color:white;font-size:20px;}h1{color:blue;text-align:center;}.div{border:solid 4px green;}</style></head><body><divclass="div"><h1>Apply the CSS styles to Nth selector ...
nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素,后者的字面意思是选择某类型的第几个元素。 首先来看他们的完整格式。 selector:nth-child(an+b) /* 如 tr:nth-child(3), p:nth-child(2n+1) */ ...
Selector:nth-child(xn+y):匹配符合Selector选择器,且必须是其父元素的第xn+y个子节点的元素 Selector:nth-last-child(xn+y):匹配符合Selector选择器,且必须是其父元素的第xn+y个子节点的元素 使用:nth-last-child伪类选择器的示例如下: <head><metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/>...
这也意味着,如果同一父级的所有子级都具有相同的元素类型,例如,表体的唯一子级是tr元素,或者列表元素的唯一子级是子元素是 li 元素,那么:nth-child()和:nth-of-type()将表现相同,即对于每个值An+B、:nth-child(An+B)和:nth-of-type(An+B)将匹配同一组元素。
:not(selector) 伪类选择器(非) 选择非指定元素/选择器的每个元素 :nth-child(n) 伪类选择器(特定位元素-顺序) 顺序选择每个层级的第 n 个元素( n 可以是数字,关键字或公式) :nth-last-child(n) 伪类选择器(特定位元素-倒序) 倒序选择每个层级的第 n 个元素( n 可以是数字,关键字或公式) :nth-of-...
:first-child: 选择父元素下的第一个子元素。:last-child: 选择父元素下的最后一个子元素。:nth-child(n): 选择父元素下的第 n 个子元素。例如，:nth-child(2) 选择父元素下的第二个子元素。通过属性值的部分匹配：[attribute*=value]: 选择具有包含指定值的属性的元素。例如，[class*=button] 选择所有...
Role of CSS nth child(n) Selector - Use the CSS :nth-child(n) selector to style every element that is the second child of its parent with CSS. You can try to run the following code to implement the :nth-child(n) selectorExampleLive Demo