Родительский элемент переопределяет стиль дочернего элемента

Question

Я хотел бы спросить, почему, когда я добавляю стиль в мой тег <a> под моим header-navigation. Дочерний тег <a> внутри nav-bar-item, кажется, переопределяется с тем, что было применено к внешнему тегу <a>. Разве он не должен выбирать только конкретный тег <a>?

Кто-нибудь может понять, что я делаю неправильно? Или я кое-что упустил, изучая SCSS

HTML

<div class="header-navigation">
    <a href="#" style="font-size:2rem;">The Pot</a>
    <div class="nav-bar">
        <li class="nav-bar-item">
            <a href="#">HOME</a>
        </li>
        <li class="nav-bar-item">
            <a href="#">PRODUCT</a>
        </li>
        <li class="nav-bar-item">
            <a href="#">TESTIMONIAL</a>
        </li>
        <li class="nav-bar-item">
            <a href="#">CONTACT</a>
        </li>
    </div>
</div>

SCSS

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    overflow-x: hidden;
    color: #454545;
    @include easeOut;
}

a,
a:visited,
a:active {
    text-decoration: none;
    color: inherit;
}

.header-navigation {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;

    a {
        font-family: "Playfair Display", serif;
    }

    .nav-bar {
        display: flex;
        align-self: flex-end;

        &-item {
            list-style-type: none;
            padding-left: 20px;

            &:hover {
                color: $primary-color;
            }
        }
    }
}

Answer 1

Вы должны использовать селектор «parent> child» (знак «больше»):

.header-navigation {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;

    > a {
        font-family: "Playfair Display", serif;
    }

    ...

В настоящее время вы используете «parent child» -selector (знак пробела), который применяет стиль ко всем следующимchild- и child-child-элементы родительского элемента. См. element>element и element element

Answer 2

Вы даете ему правило, что все якорные ссылки внутри .header-navigation должны быть стилизованы. Тем не менее, детские якоря также являются частью .header-navigation. Поэтому они будут иметь этот стиль, если вы не укажете стиль якорей внутри .nav-bar-item

Если вы также добавите это:

.nav-bar-item a {
color: red;
}

, тогда стили будут применяться только к дочерним якорям.