为什么::选择：第一个孩子不起作用？

Question

为什么这段代码不起作用？

::selection:first-child{
        background-color: #ffa563;
}

这很好 - ：第一个孩子：最后一个孩子（当元素是第一个孩子和最后一个孩子时）

Answer 1

::selection不是元素。尝试:first-child::selection应该有用。

＆＃13;

＆＃13;

:first-child::selection {
  color: red;
}

＆＃13;

<div>First Child</div>
<div>Second Child</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

混合伪类和伪元素。 ::selection是伪元素，因此它不包含任何内容，只能使用少量css属性。

如果您想在第一个孩子中选择样式，请改用:first-child::selection

Answer 3

当您尝试使用“:: selection”或“：first-child”之类的选择器时，如果指定容器则更好。

<div>
  <p>text 1</p>
  <p>text 2</p>
</div>

和css：

div p:first-child::selection {
  color: red;
  background: yellow;
}

如果您选择，第一个'p'将显示不同。

Answer 4

请注意，:first-child永远不会适应之前列出的选择器。例如，p:first-child与<div><h1></h1><p></p></div>的结构不匹配，因为p是第二个标记。

类似地，::selection:first-child也不会与选择中的第一个标记匹配，但只与选定的第一个子元素匹配。那时，它相当于:first-child::selection。

至于为什么它不起作用，::selection是伪元素。使用它会创建某种匹配的元素。但是这个伪元素永远不会存在于DOM中，因此它不能成为某个东西的第一个孩子。所以整个选择器都不匹配。