0

私はlessと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）のスタイルを写真の幅またはクラスごとに追加することはできますか？助けのための多くのthx。

4

1 に答える 1

2

これは技術的にはLESSのことではありませんが、純粋に状況に応じたCSS構造です（もちろん、LESSは構築に役立ちます）。以下は、LESSとして必要なものと、HTMLスニペットの結果のCSSです（.post-imageコードは既に持っているものです）。

以下

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クラスがに追加されると、2番目が最初をオーバーライドします.post-image。

于 2013-03-25T15:52:26.080 に答える