Question

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

我使用以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

css按预期工作，最后br代码已应用display:block。

但是，如果我打包＆＃34;阅读文章..＆＃34; css中的文本停止能够找到最后一个br。

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

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>

Answer 2

：last-child表示容器中的最后一个元素。因此，如果br不是容器br的最后一个孩子：最后一个孩子不会工作（标签是最后一个孩子）

你想要的是：最后一个类型（https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-of-type）

Answer 3

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

Answer 4

您的工作示例仅起作用，因为文本节点不计为子项，因此br被计为最后一个子项。在第二个示例中，锚点是最后一个子节点。如果你想要总是瞄准最后一个br，无论后来发生什么，你应该使用的是：last-of-type，而不是：last-child。

Answer 5

如果您想“阅读文章...”文字到下一行，您可以尝试

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

Answer 6

试试这个，

p  br{
  display: none;
}

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

它完全运作良好。

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/

br：当一个元素在br之后时，last-child不工作

7 个答案: