时间戳

首页 > 解决方案 > 风格不适用于课堂

html - 风格不适用于课堂

问题描述

我目前正面临一个非常奇怪的问题，我正在处理一个规模庞大的项目，其中包含许多 html/js/etc 文件，但我正在共享一个大多数人共有的 css 文件。在我的一个文件中，我试图添加以下 css：

.smallerDatetime {
    width: 160px;
}

一个非常简单的样式，应该没有任何问题，然后我将它添加到我的控件中：

<input id="toDate" type="text" class="form-control datetimeController smallerDatetime" placeholder="To">

最初，这不起作用。我很好奇是否存在未加载规则的问题，但在浏览器的开发模式下，我看到了这个：

元素，宽度被删除

从这一点来看，很明显正在加载 CSS 规则。然后我开始怀疑我对类的了解（最右边的类通常会覆盖左边的类）是否是错误的，我尝试了：

<input id="toDate" type="text" class="smallerDatetime form-control datetimeController" placeholder="To">

预计这也不起作用。后来，我尝试了以下方法：

<input id="toDate" type="text" class="smallerDatetime form-control" placeholder="To" style="width:160px">

这出人意料地奏效了，但后来让我更加困惑。很明显，正在加载规则（特别是在服务器端处理和导入 css- 时，清除缓存后很容易验证它是否已更新），但不知何故不适用。我在这里能错过什么？

我试图环顾现有答案，但其中大多数都存在格式问题或规则本身的其他问题，但在这种情况下，我知道规则有效，因为它的风格很好。css 和同一个 html 文件中的所有其他规则都可以正常工作。

标签： htmlcss

解决方案

您的选择器.smallerDatetime不如.form-inline .form-control. 因此它的属性被覆盖。

要使您的选择器更具体，只需使其更具体：

例如.form-inline .form-control.smallerDateTime。

为了更清楚，更具体并不意味着您重复初始选择器。

body .content form.myform .form-group .smallerDateTime也比.form-inline .form-control它根本没有提到初始类之一更具体。

PS：不要使用!important. 为什么？原因如下： 在 CSS 中使用“！important”有什么含义？

99% 的案例你可以!important通过适当的级联来放弃使用。

推荐阅读