html - CSS 无效的属性值。分配类多重继承

Question

我有一个即时消息轻型应用程序，2 个用户可以在其中进行通信。我有 2 个类，一个用于发送者，一个用于接收者。

HTML

    <div class="textcontainer lighter">
    {{ message }}
    <span class="time-right">{{ message.timestamp }}</span>
</div>  

    {% else %}  
<div class="textcontainer darker">
  <span class="time-left">11:05</span>

CSS

.textcontainer {
border: 2px solid #dedede;
background-color: #4080ff;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}

/* Darker chat textcontainer */
.darker {
    border-color: #ccc;
    background-color: blue;
    margin-left: : 0px;
    margin-right: 100px;
}

.lighter {
    border-color: #ccc;
    background-color: green;
    margin-left: : 100px;
    margin-right: 0;
}

图片

我感到困惑的是为什么 .lighter: margin-left::100px; 的 css 没有被应用。当我检查元素时。我看到 margin-left 被划掉了。

这里发生了什么？如何将剩余边距应用到“浅色/绿色”文本框？可能是 .text 容器中的 margin 覆盖了它，但如果是这种情况，那么 background-color 也会被删除。

Answer 1

快速看一下，您似乎多了一些分号。 Margin-left 应该在两者上都失败，但你只注意到你想看到的那个从左边移开。只需尝试在这些类的左边距样式中删除额外的 : ，它应该很好。

.darker {
    border-color: #ccc;
    background-color: blue;
    margin-left: 0px;
    margin-right: 100px;
}

.lighter {
    border-color: #ccc;
    background-color: green;
    margin-left: 100px;
    margin-right: 0;
}