title: Specificity between not() and first-child selectors
body: <p>So we have the following example about <code>not()</code> and <code>p:first-child{}</code> selectors.Here is the example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  p:first-child{
  color: red;
  }
  p:not(a){
      color: green;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;This a paragraph.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Why the paragraph is red at the end? Can somebody explain (if possible ) why the  <code>p:first-child{}</code> has bigger specificity than <code>not()</code> selector???</p>