我应该如何处理这个 CSS 继承难题

How should I handle this CSS Inheritance conundrum?

本文关键字：CSS 继承难题处理何处理我应该更新时间：2023-09-26

我有一类称为字形的图像出现在我的网站上。曾几何时，他们都被称为glyph。它们过去只出现在一个盒子里。该框是特定大小的，我使用javascript方法来确保文本始终适合，并且字形始终与文本其余部分的高度大致相同。这很容易做到，由于我的样式表，字形以默认值开始。

现在，我决定每页包含多个具有可变文本量的框。每个盒子的大小都是独立的。我尝试延迟大小调整例程，但这高度依赖于用户的连接速度。如果我不运行大小调整例程，那么事情看起来根本不对，所以我至少想为所有内容选择一个默认的起始大小。当然，在加载之前，你不能用javascript来调整东西的大小。蛇吃尾巴。

所以基本上，现在我有多个框，每个字形都有一个类字形：1、字形：2 等。此数字可以与我网站上的用户提交项目数一样大。CSS 如何处理这个问题？据我所知，这些项目基本上需要两个类名。但我很确定这是不允许的。

我需要什么：将所有以"字形："开头的图像类设置为 1em

这不存在，对吧？字形：*

另外，：在 css 类名中使用可能不好，对吧？

不要使用：符号。一个元素可以有多个类，所以

这样做

<div class="glyph glyph-1">Foo</div>
<div class="glyph glyph-2">Foo</div>
<div class="glyph glyph-3">Foo</div>
<div class="glyph glyph-4">Foo</div>

正如其他人所说，您不应该在类名中使用冒号符号。连字符和破折号是唯一明智的标点符号。

可以在类中使用冒号并在 CSS 代码中转义它们，但它变得非常混乱并且是不必要的。

其次（这是我将比其他答案更进一步的地方），如果你正在为你的元素生成唯一的类名，那么你可能做错了什么。

id属性用于为您的元素提供一个唯一的名称;class旨在允许您将相同的类（或多个类）应用于多个元素，从而允许您以相同的方式设置所有这些元素的样式。您可能已经知道这一点;我想我想说的是，听起来你应该使用id而不是class。

下一篇：你说你很确定不允许使用两个类名，但实际上它是允许的。完全允许有class="glyph bob"，您的元素将从类glyph和类bob中获取样式。您可以拥有任意数量的课程。但是，我仍然会说，如果您想为它们提供唯一的名称，它应该是一个ID。

您还要求使用 CSS 语法来设置所有glyph*类。再一次，你错了：这个语法确实存在，通过扩展的attr语法：

[class^="glyph"] {
    /*styles here for classes beginning with 'glyph'
}

您谈到了延迟大小调整例程以及引入的问题。对此的一种解决方案可能是完全隐藏这些项目，直到浏览器完成它们的外观。您甚至可以将它们淡入视野或其他内容，使其看起来像是故意的效果。

但是在所有这些之后，我想知道为什么要将字形放在图像中并独立调整它们的大小？这一切听起来有点奇怪;您在问题中的描述让我想知道您要实现的目标。

您是否考虑过对字形使用可缩放图形（SVG/VML）或自定义字体，而不是图像？如果您使用自定义字体，您可以简单地将字体大小指定为正常字体大小，然后让浏览器解决所有问题。

希望其中一些是有帮助的。

CSS 类名不能包含:符号。:之后的所有内容都将被解释为伪类（如:hover），并且不会被正确解析。

至于你的课程，为什么它们都必须是独一无二的？类被设置为一次选择多个元素，因此您可以这样做：

<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>
<div class="glyph">Foo</div>

并使用一个选择器将它们全部选中：

.glyph {
  color: red;
}