element style declared twice in css but css is not appling the stlye declared at last why is it so?

Question

css selector specificity is not behaving the expected way.

this is the HTML Code

   <nav>
      <p>This is the navigation</p>
      <a href="blog.html">Blog</a>
      <a href="#">Challenges</a>
      <a href="#">Flexbox</a>
      <a href="#">CSS Grid</a>
   </nav> 

this is the CSS

this comes first

   p {
      font-size: 22px;
      line-height: 1.5;
    }

after that this comes

 nav{
    font-size:18px;
    }

as per my understanding in webpage p elememt inside nav element should have 18px but it is having 22px.