时间戳

首页 > 解决方案 > 浏览器不会为 div 元素选择 css，除非我在它之前放入一个假 css

css - 浏览器不会为 div 元素选择 css，除非我在它之前放入一个假 css

问题描述

我正在将 CSS 文件链接到 django 应用程序页面。HTML 来自 ajax，一些 css 被应用，但大多数不是。例如，在 CSS 文件的顶部，我有以下内容：

$green: #86BB71;
$blue: #94C2ED;
$orange: #E38968;
$gray: #92959E;

div.nothingdiv{}


div#fav_studyspot_chat{
  margin: 0 auto;
  width: 750px;
  background: #444753;
  border-radius: 5px;
}

第二个 div 仅在我放入 nothingdiv 后才有效。谁能解释那会发生什么？

标签： css

解决方案

CSS 本身不支持使用$-prefixed 变量：这是 Sass 和 Less 等 CSS 编译器的一个特性。在 CSS 中，您可以编写的唯一顶级声明是：

  • 选择器，描述元素（例如通过类名、ID 或元素名）
  • 媒体查询，在不同的条件下描述不同的风格
  • 描述动画的关键帧
  • 和导入，允许您导入其他样式表

当浏览器在 CSS 中遇到不属于这些类型的代码时，它会忽略它，直到遇到它可以理解的代码，这通常意味着等到它遇到表示声明结束的花括号}。

如果您删除前面带有美元符号的所有变量，即使没有假样式，您的代码也应该可以工作。

如果你想在 CSS 中使用变量，而不必让它们由 Sass 或 Less 编译，你应该使用自定义属性，如下所示：

:root {
  --green: #86BB71;
}

.element {
  color: var(--green);
}

推荐阅读