html - 使用子级覆盖父级 css 设置会给出未知的属性名称

Question

我正在尝试使用 CSS 中的子类覆盖下拉菜单的父设置。不幸的是，当我尝试这样做时，即使我在父类上使用完全相同的属性，它也会在子类上给我一个“未知的属性名称”错误。

CSS 代码如下所示：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  overflow: hidden;
  min-width: 160;
  min-heigth: 100;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left:20%;
}

.test {
    min-width: 1080;
    min-heigth: 480;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

HTML 代码（django 模板格式）如下所示：

{% for info in infos %}
    <div class="dropdown">
        <a href="#">dropdown item</a>
        <div class="dropdown-content">
            {% if info.2 == "img" %}
                <!-- display image -->
            {% elif info.2 == "gif" %}
                <div class="test">Gifs and Videos are disabled for preview.</div>
            {% endif %}
        </div>
    </div>
{% endfor %}

其中info.2将始终包含字符串“gif”或“img”。我还没有实现图像。

但是，如果我使用检查元素，则会收到以下错误：

这对我来说没有任何意义，因为dropdown-content类中的 css 确实可以正常工作。这里出了什么问题？

标签： htmlcssdjango

Answer 1

因为 1080 可以是 1080 个土豆或大象，所以您需要指定px或任何您喜欢的单位