CSS无效的属性值。分配多个继承的类

Question

我有一个即时消息照明应用程序，其中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;
}