gpt4 book ai didi

html - 第 n 个 child 选择了不正确的元素?

转载 作者:太空宇宙 更新时间:2023-11-04 03:37:02 24 4
gpt4 key购买 nike

我有以下 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;
}

我想知道当第 n 个 child 被标记为 7 时,css 只将段落的字体更改为 courier。我计算的每一种方式,我只看到它在逻辑上是第 6 个、第 5 个(如果它从 0 开始)甚至可能是第二个 child (如果由于某种原因不计算 div)。谁能给我解释一下“很朴素的段落”怎么是正文的第7个 child ?

最佳答案

第7个 child 是

<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 .

关于html - 第 n 个 child 选择了不正确的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25415757/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com