html - 如何在我的 CSS 文件中选择此类

Question

目前我遇到一个问题，我有一个导航栏，其中有 2 个转移和一堆类，我正在努力弄清楚如何在我的 CSS 文件中正确地编写该类以便链接它们.

这是我的 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> 

我想选择 class="dropdowntext"

这是我当前的 CSS。

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

Answer 1

您可以通过多种方式在 CSS 中选择该元素。你的选择器不错，应该有效果。如果不是，您元素的 font-family css 属性可能会被其他 css 规则覆盖。

.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>