html - br :last-child not working when an element is after the br

Question

我在移动设备上的 html 中隐藏了 br 标签，但只希望最后一个 br 标签能够正常运行。这似乎有效，除非最后一个 br 之后的元素是 anchor 标记。

我正在使用以下代码:

p br {
  display: none;
}
p br:last-child {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br>
  <a href="#">READ ARTICLE IN JOURNAL</a>
</p>

https://jsfiddle.net/5j8dtwfd/2/

CSS 按预期工作，最后一个 br 标签应用了 display:block。

但是，如果我将“阅读文章..”文本包装在 anchor 中，CSS 将无法找到最后一个 br。

我不确定这里发生了什么，这是预期的行为吗？

Answer 1

使用 last-child，您的目标是最后一个 sibling ，不一定是最后一个 br。在这种情况下，最后一个兄弟元素是 anchor 元素。相反，请使用 last-of-type。

p br {
  display: none;
}
p br:last-of-type {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL
</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br><a href="#">READ ARTICLE IN JOURNAL</a>
</p>

请注意，在您的代码中，CSS 将 display:block 应用于 p br:last-child。

既然最后一个 child 被阻塞了， anchor 不应该换行吗？

在这种情况下不是，因为规则仅适用于 br 是最后一个 child 的情况。

因此，以某种循环方式，您的 CSS 以最后一个 child 为目标，但前提是它是 br，但事实并非如此，所以什么也不会发生。实际上最后一个子元素是一个 anchor 元素，但您的 CSS 中没有任何针对它的内容。

如果您从原始代码中的选择器中删除 br，它会将 anchor 换成新行。

p br {
  display: none;
}
p :last-child {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL
</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br>
  <a href="#">READ ARTICLE IN JOURNAL</a>
</p>