0

Всем привет,есть проблема,делаю чат,и имеется такой CSS

    #frame .content .messages ul li img {
  width: 22px;
  border-radius: 50%;
  float: left;
}

Данный код действует на этот div

  <li class="sent">
                    <img src="<?php echo $messages['ava'];?>" class="online" alt="" />
                    <p>Имя: <?php echo $messages['name'];?></br><?php echo $messages['message'];?></br></br>› <?php echo date('j.m.Y в H:i:s', $messages['time']);?></p>
                </li>

Суть проблемы: Если я в чат отправляю картинку,она наследует стиль,как этого избежать? Ибо этот код делает аватарки нужного размера и в нужном месте,но абсолютно портит вывод изображений в чате.

введите сюда описание изображения

Вот так это выглядит.В браузере в отладке так:

введите сюда описание изображения

Как я могу убрать наследование стиля для текста сообщения?

1
  • >............
    – meine
    5 сен 2019 в 12:37

2 ответа 2

0

Почему не добавить просто к картинке класс и обращаться к нему?

Во-первых: парсинг таких конструкций #frame .content .messages ul li img сложен для браузера. Лучше так не делать Во-вторых: так сложнее понимать, что происходит. Не очень масштабируется, так как стили привязаны жестко к верстке

<li class="sent">
  <img src="<?php echo $messages['ava'];?>" class="avatar online" alt="" />
  <p>
    Имя: <?php echo $messages['name'];?></br><?php echo $messages['message'];?>
    </br></br>› <?php echo date('j.m.Y в H:i:s', $messages['time']);?>
  </p>
</li>


#frame .content .messages .avatar {
  width: 22px;
  border-radius: 50%;
  float: left;
}
1
  • 1
    Вроде заработало так,спасибо.Отмечу как верный,когда сайт даст разрешение,пишет что еще 7 минут)
    – Urban Side
    5 сен 2019 в 12:41
0

Как вариант при помощи селектора >:

.message > img {
  min-height: 100px;
  background: yellow;
}
<div class="message">
  <img class="msg-img" alt="Изображение со стилем">
  <p><img alt="Изображение без стиля"></p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.