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

您给它一个规则，即SubscriptionEventListener内的所有锚链接都需要设置样式。然而，子锚也是channel.bind("my-event", new SubscriptionEventListener({ onEvent: function(event) { console.log("Received event with data: " + event.toString()); } }) );的一部分。因此，除非您在.header-navigation

内指定锚的样式，否则它们将具有该样式。

如果您还添加以下内容：

.header-navigation

然后，样式将仅适用于子锚点。

Answer 2

您应该使用选择器“ parent> child”（大于号）：

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

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

    ...

您当前正在使用“父级子代”选择器（空格符号），该选择器将样式应用于父级的所有后续子代和子代子元素。参见element>element和element element

父元素覆盖子元素样式

2 个答案: