父元素覆盖子元素样式

Question

我想问为什么每当我在header-navigation下的<a>标签上添加样式时都会这样。nav-bar-item中的子<a>标记似乎被覆盖为应用于外部<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>

南海

* {
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;
}
...

您当前使用的是"父子"选择器(空格符号(，该选择器将样式应用于父元素的所有后续子元素和子元素。 查看element>element和element element

Answer 2

你给它一个规则，.header-navigation里面的所有锚链接都需要设置样式。然而，儿童主播也是.header-navigation的一部分。因此，除非您在.nav-bar-item中指定锚点的样式，否则它们将具有该样式

如果还添加以下内容：

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

然后，样式将仅应用于子定位点。