first-of-type and first-line

user_13600848 0
Viewed 94

Is the weight of first-line greater than that of first-of-type? I'm a little confused!

p::first-line {
  color: green;
}

p:first-of-type {
  color: blue;
}

h1:last-of-type {
  color: red;
}
    <div>
     
<p>p1contentp1contentp1contentp1contentp1<br>contentp1contentp1contentp1content</p>
      <h1>h1hahaha</h1>
      <h1>h1hahaha2</h1>
      <p>p2content</p>
    </div>

In my opinion, the first p-text should be completely blue.

css
1 Answers

::first-line is a pseudo element, which means that it behaves as if it is an element inside its parent, the p.

So CSS properties defined on the p don't even apply to the ::first-line, unless they are inherited.
In this case, the color property does inherit, but it is simply overridden by the color of the pseudo element.

user_10167160
Related