除了这个less(css)代码中的pseduo类之外,如何捕获额外的css类？

2023年7月13日 204次阅读

这是我现有的较少代码：

  .my-form {
    .form-control {
      &:focus {
        border-color: blue;
      }
  }

只要获得焦点,它就会将.form-control的边框颜色设置为蓝色.

现在除焦点事件外,我想在’.my-form’元素有一个额外的类’active’时将边框颜色设置为蓝色.

我可以重复一遍,但这并不理想：

  .my-form {
    .form-control {
      &:focus {
        border-color: blue;
      }
  }

  .my-form.active {
    .form-control {
        border-color: blue;
      }
   }

但这显然不起作用：

  .my-form {
    .form-control {
      &:focus,
      & .active {
        border-color: blue;
      }
  }

我想我可以定义一个函数来设置边框颜色.但是,有什么方法可以更简洁地表达这一点吗？希望它可以在&焦点选择器旁边.

最佳答案 我想你想要做的是：

.my-form {
   .form-control {
      &:focus, .active& {
        border-color: blue;
      }
   }
}

Codepen

.active&会输出

.active .my-form .form-control

.主动和放大器;会输出

.my-form.active .form-control

点赞