尝试针对特定链接在 CSS 中进行样式设置

Question

I'm trying to target just the links in my nav bar as I have inserted other dummy links further down in my home page that I want to style on their own. I have tried adding an ID/class to the section that my header tags live in, and I have also tried targeting each individual with a class or ID attribute. This is lending itself to some functions being applied while others are not. This is purely a little practice site I am building alongside what I learn in my Udemy course, but I wanted real-time feedback. Here is the HTML I have right now:

<header id="nav-bar">
  <h1 class="welcome">Welcome to Peter's Penguins!</h1>

  <nav class="nav">
    <a href="index.html" class="nav-links">Home</a>
    <a href="about.html" class="nav-links">About Us</a>
    <a href="team.html" class="nav-links">Meet The Team</a>
    <a href="contact.html" class="nav-links">Contact Us</a>
    <a href="penguins.html" class="nav-links">Our Penguins</a>
  </nav>
</header>

and my (external) CSS is:

    .nav {
      font-family: sans-serif;
      font-weight: bold;
      text-decoration: none;
    }

    .nav-links {
      text-decoration: none;
      padding: 5px;
      margin: 23px;
    }

Is there a way I can use the pseudo-class property for my LVHA portions? Ie

    .nav-links a:link {

    }


    .nav-links a:visited {

    } 

Or is this improper syntax?

Answer 1

You can do something like

a.nav-links: visited {

}

Answer 2

This will target more specific (higher priority).

.nav .nav-links {
  color: blue;
}

Beloow wil give it a little bit more priority because it is more specific.

ul.nav a.nav-links {
  color: blue;
}

And you may use the :hover, :active, and other for functionality

.nav .nav-links:hover,
.nav .nav-links:active {
  color: red;
}