1

我有这个 html 标记：

<figure class="about half">
    <figcaption class="head_section">
        <h3>About</h3>
    </figcaption>
</figure>

这个LESS设置：

 figure {
    //some style

    &.half {
      width: 48%;
    }

    figcaption {

      h3 {

        .about & & {
          // what i need to do but isn't working
        }
      }
    }

    &.about {

      h3 {
        // some style i have which is working
      }
    }
  }

所以，我的问题是如何引用两个 previus 类figure.about以免过时h3。我希望这很清楚......非常感谢。

4

1 回答 1

4

我仍然不确定我是否理解您在这里想要实现的目标，因为您没有提供所需的 css 输出。我有点设法从您的问题中提取的想法是一个看起来像这样的 CSS：

figure {
  /* some style */
}
figure.half {
  width: 48%;
}
figure.about figcaption h3 {
  /* what i need to do but isn't working */
}

这个对吗？

这是一种使它起作用的方法&：

figure {
    /* some style */
    &.half {
        width: 48%;
    }
}
figcaption {
    h3 {
        .about & {
            /* what i need to do but isn't working */
        }
    }
}

这里的事情是&返回上面所有嵌套级别的“路径”，所以你需要用你想要使用的规则来构建嵌套规则（在我们的例子中，我把规则figcaption移出了figure规则）。所以这应该给你你想要的选择器外观。但是，嵌套规则的结构通常取决于您想要使用@variable继承和范围引用的方式，并且在某些情况下，它只会让您难以完全按照您想要的方式构建结构选择器，但是几乎永远不会有需要在您的选择器中包含整个 html 结构 - 就像您的情况figure.about h3一样figure.about figcaption h3，您可能不会h3在图形容器中添加更多元素。

于 2013-04-17T14:59:21.747 回答