::first-line权重问题?

Question

<div>
   <p id="a">First paragraph</p>
   <p>Second paragraph</p>
</div>
<style>
p#a {
  color: green;
}
div::first-line {
  color: blue;
}
div {
  color: red;
}
p {
  color: black;
}
</style>

显示效果如图,按照一般情况,id选择器的权重大于伪元素选择器,颜色应该为green
求解原因

Answer 1

找了篇文章，里面有解释，见下。同时我也学习了：CSS权重问题详解（含id、class、元素、伪类、伪元素等）

:first-line和:first-child均不受任何影响，即使在#a上加上!important，也是一样显示自己独立的样式。这两个伪元素，实际上像是在这个元素底下偷偷地声明了一个span元素，然后这个span元素继承了所有的父级元素属性，但是声明在自己元素上面的样式是会盖住继承下来的属性的。所以看起来他们的权重最高。