CSS无效属性值与类多重继承问题咨询及轻量IM应用样式调试

Hey there! Let's break down and fix your two main issues: the CSS invalid property value and styling sender/receiver messages properly with multiple classes.

1. Fixing the CSS Invalid Property Value #

Looking at your CSS snippet, the margin property is incomplete (margin: ...). Browsers will flag this as an invalid value because it doesn’t provide valid length inputs (like 10px 0, auto, or 5px 10px).

Quick Fix: #

Replace the incomplete margin line with valid values that fit your layout. For example, if you want vertical spacing between messages:

.textcontainer {
  border: 2px solid #dedede;
  background-color: #4080ff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0; /* Valid vertical margin (top/bottom 10px, left/right 0) */
}

Pro tip: When you see "invalid property value" errors, always double-check for typos, missing values, or incorrect syntax for that CSS property first.

2. Styling Sender/Receiver Messages with Multiple Classes #

First, a quick clarification: CSS doesn’t support true "multiple inheritance," but you can stack multiple classes on an element and use specific class combinations to override base styles. Your setup with .textcontainer.lighter and .textcontainer.darker is exactly the right approach—you just need to define those modifier classes correctly.

Current Problem: #

You haven’t provided CSS rules for .lighter and .darker, so those classes aren’t applying any styles right now. Also, the base .textcontainer has a fixed background-color, which you’ll want to override for sender vs. receiver messages.

Step-by-Step Solution: #

1. Adjust the base .textcontainer:
   Either remove the fixed background color (letting modifiers set it) or keep it as a default. I’ll remove it here for flexibility:

   .textcontainer {
     border: 2px solid #dedede;
     border-radius: 5px;
     padding: 10px;
     margin: 10px 0;
     max-width: 70%; /* Optional: Prevent messages from stretching full width */
   }
   

2. Define the modifier classes:
   Create rules for .lighter (sender) and .darker (receiver) to override background colors, borders, and alignment:

   /* Sender messages (lighter style) */
   .textcontainer.lighter {
     background-color: #f1f1f1;
     border-color: #ccc;
     margin-left: auto; /* Align to the right side of the chat */
     text-align: right;
   }
   
   /* Receiver messages (darker style) */
   .textcontainer.darker {
     background-color: #4080ff;
     border-color: #3377ee;
     margin-right: auto; /* Align to the left side of the chat */
     color: white; /* Make text readable on dark background */
   }
   

3. Fix your HTML structure:
   Your snippet has an unclosed {% else %} block—make sure the receiver’s div is properly closed, and use the correct message property (I’ll assume message.content for the text, adjust to match your data):

   {% if message.sender == current_user %}
     <div class="textcontainer lighter"> 
       {{ message.content }} 
       <span class="time-right">{{ message.timestamp }}</span> 
     </div>
   {% else %}
     <div class="textcontainer darker"> 
       <span class="time-left">{{ message.timestamp }}</span>
       {{ message.content }}
     </div>
   {% endif %}
   

内容的提问来源于stack exchange，提问作者Micah Pearce