我有以下html：
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 id="fancy">
This is one fancy heading!
</h3>
<p>
But I am a very plain paragraph
</p>
<p id="fancy"> But I'm fancy too!
</body>
使用以下css：
body {
margin-left: 20px;
}
body :nth-child(7) {
font-family: courier;
}
#fancy {
font-family: Cursive;
}
我想知道css仅在将第n个孩子标记为7时才将段落的字体更改为courier。按我的每一种计算方式，我只能从逻辑上看到它是第6、5（如果从0开始），甚至第二个孩子（如果由于某种原因未将div数在内）。有人可以向我解释“非常简单的段落”是身体的第七个孩子吗？
最佳答案
第七个孩子是
<p id="fancy"> But I'm fancy too!</p>
（仅供参考，您缺少关闭
</p>标记）为了更易于查看，请查看此JS Fiddle Demo，在其中我已将
color:red;添加到body :nth-child(7)。进一步分解
body {
margin-left: 20px; //this is applied to all of your elements
}
body :nth-child(7) {
font-family: courier; //this is applied to 7th child
}
#fancy {
font-family: Cursive;
//this is applied to all elements with id="fancy" including the 7th child
//this overwrites font-family: courier;
}
另外，正如DJ @Paulie_D所指出的，每页不要多次使用
id。而是在您的CSS class="fancy"中使用.fancy而不是#fancy。