猿问

nth of-type vs nth-child

nth of-type vs nth-child

我有点困惑于第n个类型的伪类，以及它应该如何工作-特别是与第n个子类相比。

也许我想错了，但考虑到这个结构

<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 */}

但是，至少在这里的铬，它没有选择它。它似乎只有当它是第一个孩子在行，这是相同的第n个孩子-因此，这和第n类型之间有什么区别？


眼眸繁星
浏览 400回答 3
3回答

Smart猫小萌

这个nth-child伪类指的是“N个匹配的子元素”，意思是如果您有如下结构：<div> &nbsp;&nbsp;&nbsp;&nbsp;<h1>Hello</h1> &nbsp;&nbsp;&nbsp;&nbsp;<p>Paragraph</p> &nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$('.row&nbsp;.label:first') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor:"blue" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});});
0

胡说叔叔

.label:nth-of-type(1)此处“type”指的是元素的类型。在这种情况下，div不是去上课。这并不意味着第一个元素是.label，相反，它意味着其类型的第一个元素也有一个label.类没有任何元素。label在索引处1他们那种类型的。
0

叮当猫咪

在图中添加的10个元素中，有8个是<p>和2<i>，两个阴影部分元素指示<i>其余8个是<p>该页面的CSS位于以下位置：<style> &nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:0; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;section&nbsp;p&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:solid&nbsp;1px&nbsp;black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;15px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;section&nbsp;i&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:solid&nbsp;1px&nbsp;black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;15px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;section&nbsp;p:nth-child(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;green;&nbsp;/*first-child&nbsp;of&nbsp;p&nbsp;in&nbsp;the&nbsp;flow*/ &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;section&nbsp;i:nth-child(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red;&nbsp;&nbsp;/*[first-child&nbsp;of&nbsp;i&nbsp;in&nbsp;the&nbsp;flow]NO&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;section&nbsp;i:nth-of-type(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;blue;&nbsp;&nbsp;/*the&nbsp;type&nbsp;i&nbsp;of&nbsp;first&nbsp;child&nbsp;in&nbsp;the&nbsp;flow*/ &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;</style></head><body> &nbsp;&nbsp;&nbsp;&nbsp;<section> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p></p> &nbsp;&nbsp;&nbsp;&nbsp;</section></body>第一个绿色灯泡表示&nbsp;section&nbsp;p:nth-child(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;green;&nbsp;/*first-child&nbsp;of&nbsp;p&nbsp;in&nbsp;the&nbsp;flow*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}代码中的第二个红色灯泡不起作用，因为我不是流中的第一个元素。section&nbsp;i:nth-child(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;red;&nbsp;&nbsp;/*[first-child&nbsp;of&nbsp;i&nbsp;in&nbsp;the&nbsp;flow]NO&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}图中的蓝色灯泡表示流动中的第一种类型的i。section&nbsp;i:nth-of-type(1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;blue;&nbsp;&nbsp;/*the&nbsp;type&nbsp;i&nbsp;of&nbsp;first&nbsp;child&nbsp;in&nbsp;the&nbsp;flow*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答