Question

我正在尝试创建包含图片的网页。但是，我希望所有图像的大小和格式相同。我有以下CSS类适用于div和中心和大小图像：

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

但是，我的图片在整个页面中都有不同的尺寸。因此，我希望只有高度和宽度的单独类，如下所示：

.200-200 {
    width: 200px;
    height: 200px;
}

当我将这两个类应用于div时，如下所示：

<div class="img-container 200-200"><img></div>

高度和宽度似乎不适用。有什么办法让这些课程分开吗？

Answer 1

对于以数字开头的课程，您需要编写

.\32 00-200 {
  width: 200px;
  height: 200px;
}

你可能想避免这样做。

\32表示数字＆＃34; 2＆＃34;。其后面的空格必须终止转义序列。

原因是＆＃34; CSS标识符＆＃34;可能不是以数字开头。在CSS中，选择器中使用的类名称被认为是＃34; CSS标识符＆＃34;。因此，必须以上面显示的方式转义前导号码。请注意，HTML视角对类名没有限制，除了它们可能不包含空格。所以你可以写<div class="%^*+<"，只要你愿意弄清楚如何在你的CSS文件中以转义形式写出来。

有关详细信息，请参阅question suggested as a duplicate。

Answer 2

CSS类名称不应以数字开头（除非您愿意执行@torazaburo's answer描述的内容）。所以也许改变它，即类名从“200-200”到“s200-200”。

.200 {
  color: red;
}
.s200 {
  color: red;
}

<div class="200">I'm not red :(</div>
<div class="s200">I am red :)</div>

Answer 3

你最好不要用数字开始上课。为了解决这个问题，请更改课程名称。

＆＃13;

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.c200 {
    width: 200px;
    height: 200px;
}

＆＃13;

<div class="img-container c200"><img></div>

＆＃13;

Answer 4

另一个非常有用的表示法是：

[class="200"]{
  width: 200px;
  height: 200px;
}

W3C specifications但是状态：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（-）和下划线（_）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“ B＆W？”可以写为“ B \＆W \？”或“ B \ 26 W \ 3F”。

因此，您可能需要考虑重新考虑类名

以数字开头的CSS类未被应用

4 个答案: