html - 提交按钮值不随 css 改变

Question

我正在尝试向提交按钮的值添加一些 CSS。唯一的问题是它不会听某些属性。更改字体大小效果很好，但我试图将其设置为 font-weight: 300; 并且它不会更改文本。有什么办法可以让它工作吗？

这是 html:是的，提交按钮是故意在 container 之外的。

<section id="contact">
    <div class="container">
        <form id="contact-form" action="contact.php" method="post" class="contact">
            <input id="sendername" type="text" name="name" placeholder="Your Name" />
            <input id="senderemail" type="email" name="email" placeholder="Email Address" />
            <textarea id="sendermessage" name="message" placeholder="Message"></textarea>
    </div>
        <input id="submit" type="submit" value="Send." />
        </form>
</section>

这是 css:它是使用 SASS 编译的。

#contact {
    min-height: 100px;
    background-color: $bgDark;
    @extend .master-padding;

    #contact-form {
        margin: 0;
        padding: 0;
    }

    #submit {
        display: block;
        width: 100%;
        font-size: 40px;
        border: none;
        color: $colorLight;
        font-weight: 300;
        @extend .action;

        &:hover {
            color: $colorDark;
        }
    }
}

Answer 1

需要说明的是，我接受的答案部分正确。另一部分是我必须将 font-family: Open Sans 添加到 css。奇怪的是，我已经在 css 的 html 标签中指定了它。我不知道为什么我必须再做一次。