title: Stop hover effect on an anchor tag within a <div> with a class using CSS
body: <p>All the links on my page have text-decoration: underline when hovered but I am trying to select anchor tags in my div with a class of logo and give it a text-decoration: none;
  So essentially I want all links on my page to be underlined when hovered except for the .logo
  Is there something I'm missing here with selecting pseudo classes? Or something else entirely.
  Could you also please take the time to briefly explain why ".logo a:hover {
      text-decoration: none;}" doesn't work.</p>
  
  <p>Thank you in advance </p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="logo"&gt;
      &lt;h3&gt;&lt;a href="#heroSection"&gt;My Name&lt;/a&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#aboutSection"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#websitesSection"&gt;Websites&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#projectsSection"&gt;Projects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contactSection"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#resumeSection"&gt;Resume&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The CSS is as follows</p>
  
  <pre><code>a:link{
      color: #000;
      text-decoration: none;
   }
  
  a:visited{
      color: #000;
      text-decoration: none;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  .logo a:hover {
      text-decoration: none;
  }
  </code></pre>