Why can't I call my css hyperlink styling class from my html code?-CodePudding

I want to create multiple classes for hyperlink styles.

I want to have a default class as well as a special class for a navigation menu.

Here's my css code:

a {
    color: white;
    text-decoration: none;
}

.menu-items a {
    color: black;
    text-decoration: none;
}

I'm trying to call the "menu-items" class in html but it keeps using the default a{} style shown above.

Here's the html code:

<div >
    <div >
        <ul >
            <li>
                <a  href="temperature.html">Temperature</a></li>
            <li>|</li>
            <li>Weight</li>
            <li>|</li>
            <li>Currency</li>
        </ul>
    </div>
</div>

I've tried removing the default class and creating two special classes without any success. Kinda at a loss here.

CodePudding user response：

your selector isn't right, becuase menu-items isn't as parent.you should select your tag like this:

a.menu-items {
color: black;
text-decoration: none;}