Question

我有较少和html标记的这一部分：

<div class="block">
   <div class="post-image"></div>
   <p></p>
</div>

和

  .post-image {
    display: inline-block;
    width: 35%; height: 80px;

    &.photo {
      width: 100%; height: 180px;
    }
  }

  p {
    width: 64%;
    display: inline-block;

    when (isstring .post-image.photo) {
      width: 100%;
  }

我知道这是错误的设置，但我只是想知道，是否有可能通过照片宽度或类更少地附加此段落（p）样式？很多需要帮助。

Answer 1

这在技术上甚至不是一件轻松的事情，但纯粹是针对你的情况的CSS构造（当然，LESS可以帮助你构建）。以下是您需要的LESS以及HTML代码段的结果CSS（.post-image代码就像您已有的那样）：

<强> LESS

p {
  width: 64%;
  display: inline-block;

  .post-image.photo + & {
    width: 100%;
  }
}

<强> CSS

p {
  width: 64%;
  display: inline-block;
}
.post-image.photo + p {
  width: 100%;
}

当.photo类添加到.post-image时，第二个将覆盖第一个。

元素风格根据其他类与LESS

1 个答案: