为什么不能覆盖这种通用的 CSS 样式？答案

【问题标题】：Why can't this universal CSS style be overwritten?为什么不能覆盖这种通用的 CSS 样式？
【发布时间】：2016-04-08 12:49:42
【问题描述】：

我试图通过this 方法平均分配 5 li 不同宽度的项目。它在 Chrome 中运行良好，但 FireFox 和 Safari 将 li 元素显示为多行。

似乎通用样式规则与我的代码冲突，特别是设置 box-sizing 的行：

*, *::after, *::before {
  box-sizing: border-box;
}

因此，我使用box-sizing: content-box !important; 在横幅上设置了明确的框大小样式，但它似乎并没有覆盖仅在 FireFox 和 Safari 中显示在顶部的通用样式：

【问题讨论】：

该属性显然已按要求应用，否则将被删除。寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
无法在 Firefox 43 中重现。
还值得一提的是，您似乎没有非常密切地遵循链接中提到的技术。基本上，如果您在最小的演示或 Stack Snippet 中重新创建问题，我们可以提供帮助...如果没有，这个问题可能会被关闭并引起负面关注。

【解决方案1】：

在 Firefox 上实现这一点的最佳方法是使用 flexbox。

我将引用 MDN docs 的内容，但会使用经过编辑的代码来满足您的问题。

来自您提供的link，这是 HTML 结构（我将在此示例中使用它）：

<ul id="parent">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
</ul>

CSS（别忘了我之前提到的 MDN 文档）：

#parent {
  display: flex;
}
#parent li {
  justify-content: center;
  width: 100%
}

注意：您可以使用以下任何一种：flex-start |弹性端 |中心 |间隔|环绕空间

注意：检查Can I Use - Flexbox，看看这个解决方案是否适合您。例如，它是 IE 10+

【讨论】：