You could try to specify further your accessor:

.change-style a {
   font-family: serif;
}

Or you can use !important to force a style to override other styling:

.change-style a {
   font-family: serif !important;
}

.change-style + a {
font-family: serif !important;
}

Or

.dropdown-menu.change-style a {
font-family: serif !important;
 }

Or

.dropdown-menu.change-style + a {
font-family: serif !important;
}

Or

.dropdown-menu a  {
font-family: serif !important;
} 

Or

.dropdown-menu + a  {
 font-family: serif !important;
 }

Or

.change-style a  {
 font-family: serif !important;
 }

Or specificity >

.dropdown-menu>.change-style a {
 font-family: serif !important;
 }

But you’ll need to specify in your head, either through stylesheet or @import see https://fonts.google.com/specimen/Roboto?selection.family=Roboto:[email protected] for example or here How to import Google Web Font in CSS file? or here https://www.w3schools.com/css/css3_fonts.asp

Also, make sure your CSS is correct. You may not be specifying exactly what you want:

For example:

font-family: 'PT Serif', serif;

May be closer if you’re using Google Fonts.

I need to change the style of the items in a dropdown, however I don’t know how to reach to the specific item:

this is my code:

<li class="nav-item dropdown">
    <a class="nav-link menu-icon dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </a>                             
     
    <div class="dropdown-menu change-style">
      <div class="nav-to-one" >
          <a class="dropdown-item font-weight-bold" href="#">Test</a>
          <hr class="card-meta-divider m-2">
          
      </div>
    </div>  
</li>

and I need to change change-style:

.change-style {
   font-family:serif;
}

It does not work in this way!