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

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

javascript css

Javascript 我应该如何处理这个CSS继承难题？,javascript,css,Javascript,Css,我有一类称为glyphs的图像，它们在我的站点中出现。很久以前，它们都被称为glyph。它们过去只出现在一个框中。这个框是一个特定的大小，我使用javascript方法来确保文本始终合适，并且字形始终与文本的其余部分高度相同。这很容易做到，由于我的样式表，glyph以默认值开始现在，我决定在每页中包含多个文本框，文本量可变。每个盒子的大小都是独立的。我已经尝试延迟调整大小的程序，但这高度依赖于用户的连接速度。如果我不运行大小调整例程，那么事情看起来就根本不对劲，所以我至少想为所有内容选择一个默

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

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

所以基本上，现在我有了不止一个框，每个glyph都有一个类glyph:1，glyph:2，等等。这个数字可以和我网站上用户提交的项目数量一样大。CSS如何处理这个问题？就我所见，这些项目基本上需要两个类名。但我很确定这是不允许的

我需要的是：将所有以“glyph:”开头的图像类设置为1em

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

而且，：可能不适合在css类名中使用，是吗？

css类名不能包含

：

符号。

：

之后的所有内容都将被解释为伪类（如

：hover

），并且不会正确解析

至于你的类，为什么它们都必须是唯一的？类用于一次选择多个元素，因此您可以执行以下操作：

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

CSS类名不能包含

：

符号。

：

之后的所有内容都将被解释为伪类（如

：hover

），并且不会正确解析

至于你的类，为什么它们都必须是唯一的？类用于一次选择多个元素，因此您可以执行以下操作：

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

不要使用：符号。对于一个元素，您可以有多个类，因此请这样做

<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>

Foo
福
福
福

不要使用：符号。对于一个元素，您可以有多个类，因此请这样做

<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>

Foo
福
福
福

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

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

第二，如果为元素生成唯一的类名，那么很可能是做错了什么

id

属性用于为元素提供唯一的名称；

类

允许您将同一类（或多个类）应用于多个元素，从而允许您对所有这些元素设置相同的样式。你可能已经知道了；我想我的意思是，听起来你应该使用

id

而不是

class

下一步：你说你很确定两个类名是不允许的，但实际上是允许的。完全允许使用

class=“glyph-bob”

，您的元素将从class

glyph

和class

bob

中选择样式。你想上多少课就上多少课。然而，我仍然想说，如果你想给他们一个唯一的名字，那应该是一个ID

您还需要CSS语法来设置所有

glyph*

类。同样，您错了：这种语法确实存在，通过：

您谈到了延迟调整大小的例行程序，以及由此带来的问题。解决这个问题的一个办法是将项目完全隐藏起来，直到浏览器确定出它们的外观为止。你甚至可以把它们淡入视野或其他东西，让它看起来像是故意造成的效果

但在所有这些之后，我想知道为什么要在图像中放置字形并独立地调整它们的大小？这听起来有点奇怪；你在问题中的描述让我想知道你想要实现什么

您是否考虑过使用可缩放图形（SVG/VML）或自定义字体来创建字形，而不是图像？如果使用自定义字体，只需将字体大小指定为正常大小，然后让浏览器完成所有操作

希望其中一些有帮助。