在 标签中选择第二个 ？答案

【问题标题】：Select a second in a tag?在 标签中选择第二个 ？
【发布时间】：2021-02-01 19:02:09
【问题描述】：

<p><strong>Lorem ipsum dolor sit amet,</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>
<p><strong>This one</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>

是否可以选择“这个”文本，第二个  并给它一个 margin-top？还是不可能？我尝试过使用p>strong:nth-child(2)，但无济于事。

我知道里面有空的，但在真实网站上也是如此，因为我无法控制 HTML（卡在 CMS/用户输入中）

【问题讨论】：

你可以简单地使用Id，你知道吗？
我认为只有 ja CSS 是不可能的，但如果可以的话，你必须使用 javascript。
@JackJohnson 怎么样？正如我在帖子中所述，我无法修改 html
如果 HTML 没有改变，您可以使用 :nth-child() 选择器，计算您必须选择哪个  标记
那么你仍然可以通过它的innerHTML选择元素，对吧？

标签： html css css-selectors parent-child

【解决方案1】：

如果您的目标是为p 标签内的每个strong 标签创建一个margin-top除了第一个p，您可以通过以下方式使用:not：

（请注意，您必须将其定义为 inline-block - 否则 margin-top 将不适用。

p:not(:first-of-type)>strong {
  display: inline-block;
  margin-top: 30px;
  color: red;
}

<p><strong>Lorem ipsum dolor sit amet,</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>
<p><strong>This one</strong></p>
<p>Lorem ipsum dolor sit amet,</p>
<p>Lorem ipsum dolor sit amet,</p>
<p></p>
<p></p>
<p></p>

【讨论】：

谢谢，有什么理由说明 :nth-child(2) 不能解决这个问题吗？
因为它不是第二个孩子 ;-) 在您的情况下，它将是第七个孩子 - 重要的是 p，而不是 strong。而strong 始终是p 的第一个孩子，因此您将无法使用它进行选择。
哦，对了，有没有办法选择第二个，里面有？我认为在 sass 中，与香草 css 相比，这可能会“更容易”一些？
不，没有办法，因为CSS中没有父选择器，也没有像“包含'xxx'”这样的条件

【解决方案2】：

您可以定位第二个 strong:s 父级（如果数字不变）：

p:nth-of-type(7) strong {
   // your css rules
}

【讨论】：