CSS中的字体样式答案

【问题标题】：Font styles in CSSCSS中的字体样式
【发布时间】：2021-07-20 04:33:01
【问题描述】：

我正在处理一个网站，我的任务是审查 CSS，在必要时进行 CSS 更新，最后进行内容更新。在对 H1 标签进行样式更改时，我注意到 .fontXlarge 类具有可以完美运行的样式，但它不适用于“H1”标签。仅适用于 p、span、ol li 和 ul li。

这里是字体样式。对于这个例子，我只包含了 .fontXlarge 的样式：

/* Mobile first */
.fontXlarge p,
.fontXlarge span,
.fontXlarge ol li,
.fontXlarge ul li {
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.fontLarge p,
.fontLarge span,
.fontLarge ol li,
.fontLarge ul li { }

.fontMedium p,
.fontMedium span,
.fontMedium ol li,
.fontMedium ul li { }

.fontSmall p,
.fontSmall span,
.fontSmall ol li,
.fontSmall ul li { }

/* Tablet */
.fontXlarge p,
.fontXlarge span,
.fontXlarge ol li,
.fontXlarge ul li {
  font-size: 32px;
}

/* Desktop */
.fontXlarge p,
.fontXlarge span,
.fontXlarge ol li,
.fontXlarge ul li {
  font-size: 48px;
}

简单地使用以下内容不是更有意义吗？这对我来说似乎很明显，以至于我想知道我是否遗漏了什么。

/* Mobile first */
.fontXlarge {
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

/* Tablet */
.fontXlarge {
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 32px;
}

/* Desktop */
.fontXlarge {
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 48px;
}

谢谢。

【问题讨论】：

.<class> <element> {display:block;}就像说：apply {display:block;} to all elements of <element> type that are nested inside of the element with class <.class>。因此，如果您不希望该 css 仅应用于嵌套在具有 fontXlarge 类的元素中的元素，那么请使用后一个 css。虽然如果这是一个小组项目，请不要像这样更改 CSS 属性。可能有其他开发人员使用这种类型的 CSS 嵌套的看不见的应用程序。
你可以对嵌套类做同样的事情，比如.class .class1 .class2 td
为什么不直接去h1 { }？您想要每种尺寸不同的h1 样式吗？如果是这样，请手动创建它们。

标签： html css fonts

【解决方案1】：

除非您想将这些类限制为只能在那些特定元素上使用，否则我认为没有理由这样构建它。那不是干的。更好的选择是仅在需要时才使用这些类，而不是限制类的功能。我认为那只是糟糕的代码。

我能想到的唯一其他可能的例外是，如果您需要通过同时定位元素和类来更具体地定位元素，以覆盖其他样式。

使用后面的代码 sn-p 看起来是更好的选择，只要确保更改不会影响元素被定位的方式。

【讨论】：

我相信您同意我的观点并使用我在原始帖子末尾的更简单的代码。对吗？
是的。抱歉，有点不清楚。我编辑了我的答案以传达这一点。

【解决方案2】：

以您给出的字体样式为例，不，这意味着 .fontXlarge 类在哪里具有 h1 的样式。 这仅意味着，当父级具有.fontXlarge 类，其子级为 p、span、ol li、ul li，则 font-size 将是 18px。

.fontXlarge p,
.fontXlarge span,
.fontXlarge ol li,
.fontXlarge ul li {
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

你可以做的就是让自己的风格有点像。

/* Desktop */
.fontXlarge h1 { // Now it means h1 within **.fontXlarge**
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 48px;
}

或者如果你想直接在 h1 上应用 .fontXlarge 类（如果你的项目允许你这样做，那么你可以使用：

/* Desktop */
.fontXlarge { // Now it means h1 within **.fontXlarge**
  color: #a9a9a9;
  font-family: "Brand Times", Arial, Helvetica, sans-serif;
  font-size: 48px;
}

在这种情况下，您的 HTML 将类似于：

<h1 class="fontXlarge">Test Heading</h1>

【讨论】：