:Shadow DOM 内的 last-child 不工作 - Firefox？

Question

有人知道 CSS 选择器 :last-child 在 Firefox 的 Shadow DOM 中不起作用的原因吗？它按预期在 Chrome 上工作。我找不到这方面的任何信息。谢谢！

Answer 1

试试 :-moz-last-node 属性。它未经 W3C 验证，所以很多人会反对它，但我认为如果 :last-child 伪选择器不能完成这项工作，这是你最好的选择。像这样使用它：

span:-moz-last-node {
  color: lime;
  background-color: #000;
}

<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Lorem ipsum...
</p>

如果您尝试上面的代码片段，但您使用的不是 Firefox，它将不起作用，因为伪选择器适用于 Mozilla 浏览器。如果你想在Chrome和Edge等其他浏览器中看到效果，它看起来像这样：

a:last-child {
  color: lime;
  background-color: #000;
}

<p>
  <a>This does not match.</a>
  <br />
  <br />
  <a>This matches!</a>
</p>

<p>
  <span>This doesn't match because it's not an "a".</span>
</p>

同样，如果您使用的是 Firefox，则第一个代码段可以使用（也许第二个）。但第二个适用于所有现代浏览器（可能不包括 Firefox）。试试这个，如果有效，请告诉我。有问题我会解决的

您可以了解有关 "un-verified" :-moz-last-node 伪选择器 here 的更多信息。

:Shadow DOM 内的 last-child 不工作 - Firefox？

:last-child inside the Shadow DOM not working - Firefox?

css

shadow-dom