nth of-type vs nth-child
nth of-type vs nth-child
<div class="row"> <div class="icon">A</div> <div class="icon">B</div> <div class="label">1</div> <div class="label">2</div> <div class="label">3</div></div>
.row .label:nth-of-type(1) {
/* some rules */}
眼眸繁星浏览 453回答 3
3回答
-
Smart猫小萌
这个nth-child伪类指的是“N个匹配的子元素”，意思是如果您有如下结构：<div> <h1>Hello</h1> <p>Paragraph</p> <p>Target</p></div>然后p:nth-child(2)将选择也是p的第二个子级(即p加上“段”)。p:nth-of-type将选择第二个匹配p元素，(即我们的目标)p).以下是ChrisCoyier@cs-Tricks.com关于这一主题的一篇伟大文章您的类型中断的原因是类型指元素的类型(即，div)，但是第一个div与您提到的规则不匹配(.row .label)，因此该规则不适用。原因是css从右向左解析。，这意味着浏览器首先在:nth-of-type(1)，确定它搜索类型的元素。div，这也是它的第一个类型，它与.row元素，以及第一个元素，.icon元素。然后，它将读取元素应该具有.label类，它与上述任何内容都不匹配。如果要选择第一个Label元素，则需要将所有标签包装在它们自己的容器中，或者只需使用nth-of-type(3)(假设总是有两个图标)。另一种选择(可悲的是)是使用.等着吧.。jQuery：$(function () { $('.row .label:first') .css({ backgroundColor:"blue" });}); -
胡说叔叔
.label:nth-of-type(1)此处“type”指的是元素的类型。在这种情况下，div不是去上课。这并不意味着第一个元素是.label，相反，它意味着其类型的第一个元素也有一个label.类没有任何元素。label在索引处1他们那种类型的。 -
叮当猫咪
在图中添加的10个元素中，有8个是<p>和2<i>，两个阴影部分元素指示<i>其余8个是<p>该页面的CSS位于以下位置：<style> * { padding: 0; margin:0; } section p { width: 20px; height: 20px; border:solid 1px black; border-radius: 15px; margin:20px; float: left; } section i { width: 20px; height: 20px; border:solid 1px black; border-radius: 15px; margin:20px; float: left; } section p:nth-child(1) { background-color: green; /*first-child of p in the flow*/ } section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ } section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ } </style></head><body> <section> <p></p> <p></p> <p></p> <p></p> <i></i> <p></p> <i></i> <p></p> <p></p> <p></p> </section></body>第一个绿色灯泡表示 section p:nth-child(1) { background-color: green; /*first-child of p in the flow*/ }代码中的第二个红色灯泡不起作用，因为我不是流中的第一个元素。section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ }图中的蓝色灯泡表示流动中的第一种类型的i。section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ }
随时随地看视频慕课网APP
Html/CSS