在较少的选择符中，“与”符号是什么意思？

我下载了一个项目，并在其中使用less编写样式表。 脚本代码中有name: own-space，less代码中有&-btn-box、&-tra和&-input-identifycode-con选择器。

我有两个问题：

• 我不知道Less中的.own-space和name: own-space的关系。

• 那里的&-btn-box、&-tra和&-input-identifycode-con是什么意思？它们有什么功能？

我的代码如下：

    <template>
      <div>
        .....
      </div>
    </template>

    <script>

      export default {
        components: {



        },
        name: 'own-space',
        data () {
          ...
          };
        },
        methods: {
          ...
        }
      };
    </script>
    <style lang="less" rel="stylesheet/less">

      ...

      .own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }
   
        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }
 
      }

    </style>

Css

Less/Sass和其他预处理程序允许您使用嵌套规则(除了变量、混合等其他内容之外)编写推荐答案代码。因此，您不必像在CSS中那样编写完整路径。您可以直接嵌套样式。

例如，您可以具有如下结构：

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

在纯CSS中，要设置您要编写的每个元素的样式：

parent { styles }
parent child { styles }
parent child grandchild { styles }

使用LESS(以及SCSS等其他预处理器)可以执行以下操作

parent {
    some parent styles 
    & child {
        some child styles 
        & grandchild {
             some grandchild styles
        }
    }
 &:hover { hover styles on parent }
 &:before { pseudo element styles }
}

等

因此，使用&可以为与父元素(在您的情况下为.own-space)建立关系的元素启用样式编写。

btn-box、-tra、-input-identifycode-con是own-space元素的直接子元素，button 是btn-box的子元素，span是button的孙子元素，btn-box的孙子元素是own-pace的孙子元素(：))。无论如何，您将获得Ideea：)

对于特定问题 .own-space { &-btn-box { ... } }意味着存在一个类为own-space-btn-box的元素，该元素很可能是own-space的子元素，但不一定是(请参阅答案末尾)。HTML的结构似乎是BEM style，但不是根据文档和规则。在使用预处理器设置样式时，强烈建议使用BEM命名策略。请看一下。

例如，当前结构可能如下所示：

堆栈代码段不接受SCSS。您可以查看工作示例here

.own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }

        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }

      }

<div class="own-space">
  The SO snippet doesn't support CSS preprocessors.
   Example purposes only 
    <div class="own-space-btn-box">
      <button>Button</button>
      <span>Some span</span>
    </div>
    <div class="own-space-tra">
       Tra tra
    </div>
    <div class="own-space-input-identifycode-con">
      identifycode
    </div>
</div>

重要信息大多数情况下，当您看到这样的样式时，元素是相关的，但是在调试其他人的代码时请记住，情况并不总是如此。它们可以无关，例如

<element class="element"> ....  </element>
<element2 class="element-element2"> ....  </element2>

SCSS仍然可以看起来像这样并具有相同的效果

.element { 
   styles
    &-element2 {
     styles
   }
}

参见示例->；not related

&的另一个用法示例是在您有两个元素具有公共类和特定类的情况下，例如

 <element class="element specific1">....</element>
 <element class="element specific2">....</element>

您可以同时添加常用样式和特定样式，如

.element { 
   /* common styles */
   &.specific1 {
     /* specific 1 styles */
   }
   &.specific2 {
     /* specific 2 styles */
   }
}

&有很多不同的用途。阅读更多信息：

• the-sass-ampersand
• Sass parent selector
• LESS
• BEM naming