Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 为什么在：root定义的字体大小被用户代理样式表覆盖？如果是'；那么这个片段应该如何工作呢？_Html_Css_Css Selectors_Font Size_Css Specificity - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 为什么在：root定义的字体大小被用户代理样式表覆盖？如果是'；那么这个片段应该如何工作呢？

Html 为什么在：root定义的字体大小被用户代理样式表覆盖？如果是'；那么这个片段应该如何工作呢？

html css

Html 为什么在：root定义的字体大小被用户代理样式表覆盖？如果是'；那么这个片段应该如何工作呢？,html,css,css-selectors,font-size,css-specificity,Html,Css,Css Selectors,Font Size,Css Specificity,我的理解是，以下代码片段中的CSS用于使字体大小随视口逐渐变化，这是完成响应性设计的可能构建块： ：根目录{ 字体大小：calc（.6em+1vw）； } 标题 文本 这是因为以下样式 :root { font-size: calc(.6em + 1vw); } 对于h1，它只是继承的样式。 直接应用于元素的任何样式都将覆盖继承的样式，这正是用户代理使用h1{font size:2em；} 如果要继承根样式，可以显式设置： h1 { font-size: inherit; } 在这

我的理解是，以下代码片段中的CSS用于使
字体大小
随视口逐渐变化，这是完成响应性设计的可能构建块： 
：根目录{
字体大小：calc（.6em+1vw）；
}

标题
文本
这是因为以下样式

:root { font-size: calc(.6em + 1vw); }
对于
h1
，它只是继承的样式。 直接应用于元素的任何样式都将覆盖继承的样式，这正是用户代理使用
h1{font size:2em；}

如果要继承根样式，可以显式设置：

h1 {
   font-size: inherit; 
}
在这种情况下，您和用户代理都直接应用样式，您的样式将获胜，因为它具有相同的特殊性，并且在另一个样式之后加载。
但这种方法的问题是，如果
或任何最近的父级具有显式
字体大小，它将继承该字体而不是根

在我看来，使用CSS变量可以更好地处理整个情况



：根目录{
--字体大小：calc（.6em+1vw）；
}
h1{
字体大小：var（--字体大小）；
}



标题
文本

噢，事实上devtools显示规则集
font size:calc（.6em+1vw）删除并不意味着事情没有效果，它只是意味着它是计算相对值的基础值！em意味着使用父级的字体大小作为参考，因此您的h1具有
2*（0.6*16px+1vw）
语言设置为它让我有点困扰，但示例文本显然是英语lol。