Question

我有以下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时才将段落的字体更改为快递。每次我都算数，我只能在逻辑上看到它是第6个，第5个（如果是从0开始，或者甚至是第二个孩子（如果出于某种原因不计算div）。有人可以向我解释一下＆＃34;非常简单的段落＆＃34;是身体的第7个孩子？

Answer 1

第7个孩子

<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。而是使用class="fancy"和CSS .fancy而不是#fancy。

Answer 2

就像Paulie_D和Dan所提到的那样，ID不应该重复。

如果将id更改为类，您会注意到'nth-child'选择器的权重大于类选择器。所以你需要像这样添加'！important'：

    .fancy {
        font-family: Cursive !important; 
    }

或包括所选元素：

    p.fancy, h3.fancy {
        font-family: Cursive; 
    }

Answer 3

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 class="fancy">This is one fancy heading!</h3>
<p> But I am a very plain paragraph</p>
<p class="fancy"> But I'm fancy too!</p>

/ 在CSS中请使用.fancy而不是#fancy /

<style>
body {
  margin-left: 20px;
}

body :nth-child(7) {
font-family: courier;
}

.fancy {
  font-family: Cursive;
}
</style>

nth-child选择不正确的元素？

3 个答案: