CSS 无效的属性值。分配类多个继承
发布于2022-11-04 03:30 阅读(1267) 评论(0) 点赞(6) 收藏(1)
我有一个即时消息轻应用程序，两个用户可以在其中进行通信。我有 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: 的 cssmargin-left: : 100px;没有被应用。当我检查元素时。我看到它margin-left被划掉了。
这里发生了什么，如何将边距应用到“浅色/绿色”文本框？可能是margin.text 容器中的 .text 容器覆盖了它，但如果是这种情况，那么 .textbackground-color也会被删除。
解决方案
快速看起来好像你有一些额外的分号。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;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/450080/6059ab7407c08fa644f7/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力