Question

我有一个带

的外部样式表

table {
    margin-top: 10px;
    width: 100%;
}

在一个页面上，我想在文档的头部覆盖这样的边距：

<style>
    table {
        margin-top: 0px;
}
</style>

但除非我使用!important，否则它无效。我误解了级联吗？

Answer 1

您的<style></style>部分可能位于<link href>标记之上。尝试移动<style>下方的<link>部分，您将不再需要!important。

<head>
   ...
   <link rel="stylesheet" type="text/css" href="site.css">
   <style>
     table { margin-top: 0px; }
   </style>
   ...
</head>

如果您使用一些具有主布局继承的模板引擎，请确保将<style>块注入<link href>标记下的子模板中

_layout.html：

<head>
    <link rel="stylesheet" href="style.css" />
    {% block head %}
    {% endblock %}
</head>

child.html：

{% block head %}
    <style type="text/css">
         table { margin-top: 0px; }
    </style>
{% endblock %}

Answer 2

另一种选择是将内联样式设置为样式，这将优先于其他任何内容。

<table style="margin-top: 0px;">