css - 字符 '>' 和 '&' 在 bootstrap less 模块中意味着什么？

Question

我是 bootstrap 的新手，我想对其进行自定义。当我看到“>”和“&”字符时，我感到很困惑。这意味着什么？是否存在于较少的文档中。那是某种嵌套吗？请参阅下面的示例代码。

.navbar-nav {
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: @navbar-inverse-link-active-bg;
        color: @navbar-inverse-link-active-color;
      }
    }

这可能是最简单的问题，不要因此而恨我。谢谢大家。

Answer 1

在 CSS 中，“>”字符表示只有“第一个嵌套”元素(“直接子”元素)将被定位。

这意味着在以下场景中:

   <div id="a">
       <div id="b">
          <div id="c">
          </div>
       </div>
   </div>

然后在 CSS 中 #a > div只会针对 <div id="b">和不 <div id="c">

没有>字符，#a div将针对“b”和“c”。

---

关于LESS中的&字符:

& 符号选择器最常用于将修改类或伪类应用于现有选择器时:

a {
    color: blue;
    &:hover {
        color: green;
    }
}

本例中的内部选择器编译为 a:hover。如果没有 &，它将编译为 :hover(匹配标记内悬停元素的后代选择器)。

阅读更多信息 http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/