Css 在Codepen中使用*-选择器将改变预览

这可能不是一个传统的CSS问题，但肯定是问题的原因

总之，当我设置Codepen示例并输入以下规则时：

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

* {
  display: flex;
}

它在预览中以原始文本的形式返回此：

CodePen Demo*, ::after, ::before { box-sizing: border-box; } * { display: flex; }//# sourceURL=pen.js 

---

现在，添加任何CSS和HTML将预览如下：

<div>Div</div>

---

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

* {
  display: flex;
}

html {
  font-family: 'Georgia';
}

---

 CodePen Demo*, ::after, ::before { box-sizing: border-box; } * { display: flex; } html { font-family: 'Georgia'; } Div//# sourceURL=pen.js 

Div
---
*,
：：之后，
：：之前{
框大小：边框框；
}
* {
显示器：flex；
}
html{
字体系列：“格鲁吉亚”；
}
---
代码笔演示*，：：之后，：：之前{box size:border box；}*{display:flex；}html{font-family:'Georgia'；}Div/#sourceURL=pen.js

重新加载或切换浏览器无助于它，但只会使它恶化：

那么bug就在这里了-

*{
    display: flex;
}

您正在应用通用选择器中的

display:flex

属性，该属性可能具有

因此，简单的解决方案是将

display:flex

属性应用于

body

标记和您想要它的特定标记。一些额外的代码可以避免不必要的结果

你可以检查我的钢笔。我所改变的只是css中带有主体的

*

编辑-在body标记中使用通用选择器可能仍然会产生奇怪的后果，因为如果在

body

标记中包含任何脚本甚至注释，那么您将看到类似的结果-

正文*{
显示器：flex；
}

一些文本
函数hi（）{
警报（“Hi”）；
}

您能提供指向您的钢笔（目前有此问题）的链接吗？@pranetxit，当然可以。就是这个：没错

flex

属性不得与通用选择器一起使用。当

*

选择甚至

，

，等等时，它必须产生bug，而这不能是flexbox，对吗？@ShounakDasAbsolutely@Simplicius即使这样也可能有一些副作用。检查我编辑的答案。

显示

属性不应与通用选择器一起使用。如果您想将多个元素作为flexbox，那么应该使用

flex

类并将其添加到html中的所有这些元素中。像

margin

和

padding

这样的属性可以安全地与

*

@ShounakDas一起使用是的