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

编程问答 2022-05-02

问题描述

我的理解是，以下代码段中的 CSS 是为了让 font-size 随着视口逐渐变化，视口是完成响应式设计的一个可能构建块： 

:root {
  font-size: calc(.6em + 1vw);
}
<html lang="it">
  <body>
    <h1>Title</h1>
    text
  </body>
</html>

然而，devtools 显示 font-size: calc(.6em + 1vw); 被用户代理样式表的以下规则集覆盖（并显示如下：font-size: calc(.6em + 1vw);）

h1 {
    font-size: 2em;
    /* and other stuff */
}

为什么会发生这种情况？

:root { font-size: calc(.6em + 1vw); } 规则集不是我的发明，所以它应该有效，而且我认为我只是误用/误解了它。

我的理解是 :root 选择器与 html 选择器针对相同的对象，但具有类特异性而不是标签特异性。鉴于此，我希望用户代理样式表的 h1 {} 规则集无法覆盖它。

解决方法

这是因为遵循风格

:root { font-size: calc(.6em + 1vw); }

在 h1 的情况下，只是一种继承的样式。 直接应用于元素的任何样式都将覆盖继承的样式，这正是用户代理对 h1 { font-size: 2em;}

所做的

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

h1 {
   font-size: inherit; 
}

在这种情况下，您和用户代理都直接应用该样式，您的将获胜，因为它具有相同的特异性并且在另一个之后加载。
但这种方法的问题在于，如果 <body> 或任何最接近的父级具有显式 font-size，它将继承该 :root { --font-size: calc(.6em + 1vw); } h1 { font-size: var(--font-size); } 而不是 root。

我认为 CSS 变量可以更好地处理整个情况。

<html lang="it">

<body>
  <h1>Title</h1>
  text
</body>

</html>
Table table = new Table(4);
table.SetWidth(UnitValue.CreatePercentValue(100));
// no border on the table
table.SetBorder(null);

// no border on the cell
Cell cell = new Cell().SetBorder(null);
Text t = new Text("410.40");
// top and bottom border on the Text instance
t.SetBorderTop(new SolidBorder(1.5f));
t.SetBorderBottom(new SolidBorder(1.5f));
Paragraph p = new Paragraph().Add(t);
cell.Add(p);
table.AddCell(cell);

// some test cells
table.AddCell(new Cell().Add(new Paragraph("Column 2")).SetBorder(null));
table.AddCell(new Cell().Add(new Paragraph("C 3")).SetBorder(null));
table.AddCell(new Cell().Add(new Paragraph("C 4")).SetBorder(null));

doc.Add(table);

css-selectorscss-specificityfont-sizehtml