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

Question

我br在移动设备的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.

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

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定位于最后一个孩子,但只有当它是a 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的最后一个子节点:last-child不起作用(标签是最后一个子节点)

你想要的是br:last-of-type(https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-of-type)