如何在我的 CSS 文件中使用 select 这个 class

Question

Currently I'm having an issue where i have a navigation bar where i have 2 diversions and a bunch of classes and I'm sturggling to figure out how to correectly write up that class within my CSS file in order to link them.

This is my HTML.

<img class="logo" src="svg/robert-evans-logo.svg" alt="evans design logo">

  <div class="sidenav">
    <a class="current" href="index.html">Home</a>
    <a href="https://robertevansuni.uk/Journal/">Journal</a>
    <button class="dropdown-btn">Davids Work
      <i class="fa fa-caret-down" aria-hidden="true"></i>
    </button>  
    <div class="dropdown-container">
    <a class="dropdowntext" ref="three-designed-objects-homepage.html">Designed Objects</a>
<!--
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
-->
</div>

  <button class="dropdown-btn">Priscas Work
    <i class="fa fa-caret-down" aria-hidden="true"></i>
  </button>
  <div class="dropdown-container">
    <a href="Typography-arrangement.html">Typography</a>
    <a href="lithome.html">literature</a>
<!--     <a href="#">Link 3</a> -->

  </div>
  <a class="submenu"href="oldwebsites.html">Archived Websites</a>
  <a class="nav-menu" href="about.html">About</a>
  <button class="openBtn" onclick="openSearch()">Search</button>
</div> 

and I want to select the class="dropdowntext"

This is my current CSS.

.dropdown-container a.dropdowntext {
  font-family: futura_lt_btlight, "Open Sans", "Didact Gothic", Questrial, Muli, sans-serif;
}

Answer 1

You have many ways to select that element in CSS. Your selector is good, it should have the effect. If it not, your font-family css attribute of your element might be override by other css rules.

 .dropdowntext1 { color: red; }.dropdown-container.dropdowntext2 { color: yellow; }.dropdown-container a.dropdowntext3 { color: green; }.dropdown-container a:first-child { color: cyan; }.dropdown-container a:child(4) { color: black; }

 <img class="logo" src="svg/robert-evans-logo.svg" alt="evans design logo"> <div class="sidenav"> <a class="current" href="index.html">Home</a> <a href="https://robertevansuni.uk/Journal/">Journal</a> <button class="dropdown-btn">Davids Work <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <div class="dropdown-container"> <a class="dropdowntext1" ref="three-designed-objects-homepage.html">Designed Objects</a> <a class="dropdowntext2" ref="three-designed-objects-homepage.html">Designed Objects</a> <a class="dropdowntext3" ref="three-designed-objects-homepage.html">Designed Objects</a> <a class="dropdowntext4" ref="three-designed-objects-homepage.html">Designed Objects</a> </div> <button class="dropdown-btn">Priscas Work <i class="fa fa-caret-down" aria-hidden="true"></i> </button> <div class="dropdown-container"> <a href="Typography-arrangement.html">Typography</a> <a href="lithome.html">literature</a> </div> <a class="submenu"href="oldwebsites.html">Archived Websites</a> <a class="nav-menu" href="about.html">About</a> <button class="openBtn" onclick="openSearch()">Search</button> </div>