当我用这段代码创建一个 html 页面时
<style>
* {
display: flex;
justify-content:center;
align-items:center;
}
</style>
我得到了这个输出
这是为什么?
[我不是在寻找解决方案,我是在询问为什么我仅在使用“display:flex”时(而不是在使用其他 css 属性时)得到此输出的原因]
最佳答案
假设默认情况下不会显示 head 和 style 当您仅使用此代码创建 html 页面时
<style>
* {
display: flex;
justify-content:center;
align-items:center;
}
</style>
浏览器会生成如下DOM结构
由于您已经为所有元素定义了该样式(通过星号选择器),因此该规则也适用于 head
和 style
元素,因此它们与你定义的风格
为了防止这种行为,如果这是您的目标,您可以将该样式仅应用于 body
及其后代,例如
<style>
body, body * {
display: flex;
justify-content:center;
align-items:center;
}
</style>
或者简单地指向除head
<style>
:not(head) {
display: flex;
justify-content:center;
align-items:center;
}
</style>
关于css - 为什么在使用 flex 时样式标签也得到 "style"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31674324/