0%

父元素覆盖子元素样式

❓ 我想问一下,每当我在标题导航下的<a>标记中添加样式时,nav-bar-item中的子<a>标记似乎被覆盖到外部<a>标记上的所有内容。 它不应该只选择特定的<a>标签吗?

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
* {
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;
}
}
}
}

✔️ 您应该使用选择器parent>child(大于号):

1
2
3
4
5
6
7
8
9
10
.header-navigation {
padding-top: 30px;
display: flex;
justify-content: space-between;

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

...

您当前正在使用"parent child"-selector(空格符号),该选择器将样式应用于父级的所有后续子代和子代子元素。