html - 按钮的用户样式表声明覆盖自定义 CSS

Question

我想在下面的代码片段中的第三个按钮之后插入一个换行符。我发现了这个技巧并想使用它，但它不起作用，因为我的按钮不接受display: inline并且无论如何都保持用户代理样式display: inline-block（不重要，也没有越来越具体的选择器会有所帮助）。有人知道为什么吗？如果我改为在 a 标签上使用这个技巧，它工作得非常好。

我知道如果我要插入一个 div，我也可以使用 Flexbox 进行换行，但我不能轻易更改标记。

.wrap .button-third {
    display: inline;
}

.button-third:after {
  content: "\a";
  white-space: pre;
}
/*

.first-link {
    display: inline;
}
.first-link:after {
    content: "\a";
    white-space: pre;
}
 */

<div class="wrap">
  <button class="button-first"> Button 1</button>
  <button class="button-second">Button 2</button>
  <button class="button-third">Button 3</button>
      
  <a href="" class="first-link">Link 1</a>
  <a href="" class="second-link">Link 2</a>
</div>

标签： htmlcssbutton

Answer 1

现在通过在第一个链接上添加带有 before 的换行符来修复它。达到同样的结果。我想知道为什么我以前没有看到这个最简单的解决方案！但是，如果有人知道为什么用户代理样式表会覆盖我的声明，我仍然会感兴趣。

.wrap .first-link {
    display: inline;
}

.first-link:before {
  content: "\a";
  white-space: pre;
}
  

<div class="wrap">
  <button class="button-first"> Button 1</button>
  <button class="button-second">Button 2</button>
  <button class="button-third">Button 3</button>
      
  <a href="" class="first-link">Link 1</a>
  <a href="" class="second-link">Link 2</a>
</div>