Select 标签中的第二个 ？

Question

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

是否可以 select 'This one' 文本，第二个  并给它一个 margin-top？还是不可能？我试过 p>strong:nth-child(2) 但无济于事。

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

Answer 1

如果您的目标是为 p 标签内的每个 strong 标签创建边距顶部 除了第一个 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>

Answer 2

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

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

Select <p> 标签中的第二个 <strong>？

Select a second <strong> in a <p> tag?

html

css

css-selectors

parent-child