Question

我在CSS中具有以下内容，并且可以正常工作：

.vc_column-inner, .wpb_wrapper, .textCard {
    height: 100%;
}

我需要这样做，以便同一块的多张卡片的高度相等。

但是，我只希望在父类上存在类customHeight的情况下执行样式。所以在SASS中，我有以下内容：

.customHeight{
    .vc_column-inner,
    .wpb_wrapper,
    .textCard{
      height: 100%;
    }
}

这是错误的，因为它只会将.customHeight附加到所有三个div中。我该怎么办？

修改：

.customHeight>.vc_column-inner,
.customHeight>.wpb_wrapper,
.customHeight>.textCard {
  height: 100%;
}

.customHeight.vc_column-inner, .customHeight.wpb_wrapper, .customHeight.textCard {
  height: 100%;
}



.columnA, .columnB{
  border: 1px solid red;
}

<div class="cutsomHeight">
  <div class="vc_column-inner">
    <div class="wpb_wrapper">


      <div class="columnA">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="textCard">
              <p>test 1</p>
            </div>
          </div>
        </div>
      </div>

      <div class="columnB">
        <div class="vc_column-inner">
          <div class="wpb_wrapper">
            <div class="textCard">
              <p>test 2<br><br> test 1 should be same height as test 2</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 1

是的，它会产生如下内容：

.customHeight .vc_column-inner,
.customHeight .wpb_wrapper,
.customHeight .textCard {
  height: 100%;
}

如果您需要这样的东西（据我了解）：

.customHeight.vc_column-inner,
.customHeight.wpb_wrapper,
.customHeight.textCard {
  height: 100%;
}

您可以像这样使用＆运算符：

.customHeight{
    &.vc_column-inner,
    &.wpb_wrapper,
    &.textCard{
      height: 100%;
    }
}

这是您要找的吗？

Answer 2

您可以将&运算符与>运算符一起使用。

.customHeight{
    & > .vc_column-inner,
    & > .wpb_wrapper,
    & > .textCard{
      height: 100%;
    }
}

它将仅对.vc-column-inner类的元素的子元素.wpb_wrapper，.textCard和.customHeight的元素应用高度100％。 Read More关于CSS选择器

如果存在类，请使用以下样式（SASS）

2 个答案: