Question

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

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

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

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

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

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

Answer 1

不要使用：符号。你可以有一个以上的元素类，所以这样做

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

Answer 2

正如其他人所说，你不应该在类名中使用冒号。连字符和短划线是唯一合理使用的标点符号。

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

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

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

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

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

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

您谈论延迟规模调整程序以及引入的问题。对此的一个解决方案可能是将项目完全隐藏，直到浏览器完成它们的外观。你甚至可以将它们淡入视图或某些东西，使它看起来像是故意的效果。

但是毕竟，我想知道你为什么要将字形放在图像中并单独调整大小？听起来有点奇怪;你在问题中的描述让我想知道你想要实现的目标。

您是否考虑过为您的字形使用可缩放图形（SVG / VML）或自定义字体，而不是图像？如果你使用自定义字体，你可以简单地指定字体大小，让浏览器全部工作。

希望其中一些有用。

Answer 3

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

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

3 个答案:

我该如何处理这个C​​SS继承难题？

3 个答案:

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