当一个元素在br标签后面时，使用br:last-child无效。

Question

我正在移动设备上隐藏HTML中的br标签，但想让最后一个标签正常工作。这似乎可以实现，除非最后一个br后面的元素是锚点标签。

我使用以下代码：

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。

然而，如果我将“read article..”文本包含在超链接中，css就无法找到最后一个 br。

我不确定这里发生了什么导致这种情况，这是否是预期的行为？

- rmmoul

Answer 1

使用last-child时，您是在定位最后一个兄弟元素，而不一定是最后一个br元素。 在这种情况下，最后一个兄弟元素是锚点元素。 相反，请使用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。

由于最后一个子元素被块化，难道锚点不会自动换行吗？

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

因此，您的CSS以某种循环方式定位到最后一个子元素，但仅当它是br时才适用，而这并非如此，因此不会发生任何事情。实际上的最后一个子元素是一个锚点元素，但是您的CSS没有针对它进行任何定位。

如果您从原始代码的选择器中删除br，它将使锚点换行。

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>

- Michael Benjamin

Answer 2

:last-child指的是容器中的最后一个元素。因此，如果br不是容器的最后一个子元素，则br:last-child将无效（a标签是最后一个子元素）。

你需要使用br:last-of-type (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-of-type)。

- haltersweb

Answer 3

尝试使用 p:last-of-type 替代 p:last-child。

- Oscar Siauw

Answer 4

你的示例之所以有效，是因为文本节点不算作子节点，所以br被计算为最后一个子节点。在第二个示例中，锚点是最后一个子节点。如果你想始终针对最后一个br，无论其后跟着什么，你应该使用:last-of-type，而不是:last-child。

- tstoik

Answer 5

如果你想让“阅读文章…”的文本换行，可以尝试使用以下代码：

p a:last-child{
  display:block;
}

- vedankita kumbhar

---

很不幸，在我的项目中，锚点标签是一个内联块，被样式化成按钮的外观，并且在多个位置使用，其内容宽度也不同。将其设置为display:block会使其占据容器的100％宽度，或者我必须设置一个精确的宽度，这并不理想。我将使用:last-of-type来使其按照我想要的方式工作。 - rmmoul

Answer 6

试试这个，

p  br{
  display: none;
}

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

它完全工作良好。

- Henry Bui

---

“试一下吧，完全可以正常工作。”这似乎不是一个非常令人信服的答案。我会对此持谨慎态度。 - BoltClock

我只是想要帮助！我是越南人，我的英语表达不好。 - Henry Bui

Answer 7

<br> 不是块级元素。它只是换行，没有任何 height 或 width。所以你可以将锚点标签设置为块级元素。

p  br:not(:last-child) {
  display: none;
}

p a {
  display: block;
}

或者您可以使用:last-of-type

p  br:not(:last-child) {
  display: none;
}

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

这也是有效的，因为:last-of-type：它针对特定类型的元素以及与类似兄弟元素的关系中的特定排列，而不是所有兄弟元素。

请访问此链接以获取更多信息：

https://css-tricks.com/almanac/selectors/l/last-of-type/

- Yubaraj Shrestha

---

"<br> 不是块级元素。" 好吧，根据浏览器的不同，它也可以是。 - BoltClock

这里的解决方案是使用:last-of-type。在实时HTML中，锚点在多个位置上被样式化为按钮，不能是100%宽度或具有固定宽度，因此需要保持inline-block。 - rmmoul