Question

这可能是非常令人尴尬的事情;然而，它一直困扰着我。

在下面的示例中，为什么字体大小没有应用于文本？

.1px {
  font-size: 1px;
}
.100px {
  font-size: 100px;
}

<p class="1px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

不，我没有使用bootstrap，更不用说任何插件覆盖了字体大小。

编辑：感谢您的回复，我称之为令人尴尬。

Answer 1

您可以使用css属性选择器来定位以数字开头的类名。

示例：

＆＃13;

var linkFn = $compile(res.data);
timeout(function () {
    self.newSlides.forEach((slide) => {
        var what = document.getElementById("Hey-" + slide.ID);
        linkFn(scope,(clone) => {
            what.parentNode.replaceChild(clone, what);
        });           
    });        
}, 0, false);

＆＃13;

[class="12px"] { font-size: 12px; }
[class="100px"]  {font-size: 100px; }

＆＃13;

Answer 2

使用此代替1px，2px --- 100px作为类不是数字的开头。

   <style>
    .one{
      font-size: 1px;
    }
    ---
    ---
    ----
    .hundred {
      font-size: 100px;
    }
    </style>

    <p class="one"> Hello, world. </p>
    <p class="hundred"> Hello, world. </p>

Answer 3

除了使用数字启动类名之外，某些浏览器还会施加最小字体大小，然后由用户控制。

Answer 4

以数字开头的CSS类选择器和ID选择器无效。

Characters and case

但你仍然可以解决这个问题。首先要实现此目的的有两种方法是attribute选择器：

/* attribute selector */
[class="12px"] {
    font-size: 12px;
}

其他是unicode选择器：

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

/* attribute selector */
[class="12px"] {
  font-size: 12px;
}

/* or unicode selector */
.\31 00px {
  font-size: 100px;
}

<p class="12px"> Hello, world. </p>
<p class="100px"> Hello, world. </p>

注意：如果进入属性选择器路由，请注意它只适用于IE7。如果您需要支持旧浏览器而不是您的同情（您仍然可以使用unicode选择器）。

CSS字体大小的类不起作用

4 个答案: