Css 较少的混合是否可以对某些元素类型应用特殊规则？

我有一个按钮样式的混合，我应用于按钮样式的

a

标签和实际的

button

标签，但我使用flexbox垂直居中，这在一些版本的Webkit中被打破

例如，以下是我如何使用手写笔完成这项工作，但我需要用更少的时间完成同样的工作：

.container {  
  btn(width) {
    display: flex;
    flex-direction: column;
    width: width;
    height: 50px;

    // How can I do this part, somehow, in Less?
    ../ button^[1..-1] {
      display: inline-block;
    }
  }

  .btn {
    btn(100px);
  }
}

上面是我用手写笔做的，但我希望找到另一种方法来绕过这个限制。例如，我尝试在选择器中添加

：not（：not（button））

，但浏览器似乎不支持此操作。

Less（或任何预处理器）无法知道选择器代表的是哪种类型的元素，因此在没有开发人员明确指示的情况下，他们无法生成此类规则。此外，Less不支持针对父选择器的特定部分并对其进行修改。因此，对于讨论中给出的手写笔代码没有直接转换

---

话虽如此，仍有一些替代选项可用于生成类似于手写笔代码的输出

选项1:（使用CSS

：非

选择器）

我们可以使用CSS

：not

（否定）选择器将flexbox样式仅应用于非

按钮
元素的
.btn
元素


.container{
.btn混音（@width）{
显示：内联块；/*默认显示为内联块*/
宽度：@宽度；
高度：50px；
&：not（button）{/*非按钮元素的覆盖*/
显示器：flex；
弯曲方向：立柱；
}
}
.btn{
.btn混合（100px）；
}
}

这不能用默认显示形式flex编写，因为可以在末尾附加否定选择器，而不能附加元素类型选择器。下面是一个已编译CSS的演示


.container.btn{
显示：内联块；
宽度：100px；
高度：50px；
}
.container.btn:非（按钮）{
显示器：flex；
弯曲方向：立柱；
}

你好
我们
是
一些
按钮
< >代码> OK，我刚读了手写笔文档，你似乎想在父的中间插入一个选择器（按钮）（这是代码>容器。BTN < /COD>）。哈利，这是我用触控笔做的，但我希望找到另一种方法来绕过这个限制。例如，我尝试将：not（：not（button））添加到选择器，但浏览器似乎不支持此操作；-）在我的react项目中，我在我的所有按钮上添加了一个子div并对其进行了样式化，这样我就可以对我的所有元素使用相同的样式。尽量不要依赖非常具体和复杂的选择器。他们以后会让你发疯的。相反，编写有意义的标记并对其应用简单的类（BEM样式）