CSS Specificity - Conflicts between CSS selectors-CodePudding

I have a question regarding the following pseudo-class selector. Even with !important, the text under this li:first-child is not showing blue.

p has Selector Specificity: (0, 0, 1) li:first-child has Selector Specificity: (0, 1, 1)

I am expecting the xyz to be blue but it is red. Unless comment out CSS for p (red color).

p {
  color: red;
}

li:first-child {
  color: blue !important;
  list-style: none;
}

<p>abc</p>
<aside>
  <ul>
    <li>
      <p>xyz</p>
    </li>
  </ul>
</aside>

After reviewing the answer, the new code is good:

<html lang="en">
  <head>
    <title>Test</title>
    <style>
      p {
        color: red;
      }
      li:first-child p {
        color: blue;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <p>abc</p>
    <ul>
      <li><p>xyz</p></li>
    </ul>
  </body>
</html>

CodePudding user response：

The li:first-child makes the color of the <li> blue, but the <p> is still red.

li:first-child selects the li that is a first child, not the first child of the li.

CodePudding user response：

p {
  color: red;
}

li:first-child p {
  color: blue !important;
  list-style: none;
}

<p>abc</p>
<aside>
  <ul>
    <li>
      <p>xyz</p>
    </li>
  </ul>
</aside>