1

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

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

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

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

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

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

4

3 回答 3

4

不要使用 : 符号。一个元素可以有多个类，所以这样做

<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>
于 2012-04-18T20:30:13.953 回答
2

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

可以在类中使用冒号并在 CSS 代码中对其进行转义，但这会变得非常混乱且没有必要。

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

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

下一篇：你说你很确定两个类名是不允许的，但实际上是允许的。这是完全允许的，class="glyph bob"并且您的元素将从 classglyph和 class中获取样式bob。你可以有尽可能多的课程。然而，我仍然会说，如果你想给他们唯一的名字，它应该是一个 ID。

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

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

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

但毕竟，我想知道你为什么要在图像中放置字形并独立调整它们的大小？这听起来有点奇怪。您在问题中的描述让我想知道您要达到的目标。

您是否考虑过为您的字形使用可缩放图形 (SVG/VML) 或自定义字体，而不是图像？如果您使用自定义字体，您可以像正常一样简单地指定字体大小，然后让浏览器处理它。

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

于 2012-04-18T20:51:22.260 回答
1

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;
}
于 2012-04-18T20:27:24.920 回答