时间戳

首页 > 解决方案 > span {} 在 CSS 语法中的作用是什么？

css - span {} 在 CSS 语法中的作用是什么？

问题描述

我得到了一些示例 CSS 代码（编写良好且工作良好），其中包含许多span语句，我对其进行了修改以供我使用。他们究竟是做什么的？VS Code 将我显示为错误，但浏览器不会抱怨，而且我在 CSS 文档中找不到任何引用，就好像这种语法不存在一样。例子：

h2 {
  letter-spacing: 2vw;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  span {
    display: block;
    font-size: 8vw;
    letter-spacing: -1vw;
  }
}

VS 代码抱怨：

"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",

如果我添加冒号，它将立即建议密钥，并且不会接受大括号中的任何内容{} 谢谢

标签： cssformatting

解决方案

你说得对，CSS 不存在这种语法，因为它不支持这样的嵌套选择器。

正确的语法是：

h2 {
  letter-spacing: 2vw;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
}

h2 span {
  display: block;
  font-size: 8vw;
  letter-spacing: -1vw;
}

如果您使用CSS 预处理器，例如SASS或LESS ，这种语法当然是完全可以接受的。CSS 预处理器将您编写的 CSS 编译成标准 CSS 语法，并添加额外的功能，例如使用变量和条件语句。

我认为现代浏览器在某些情况下可能能够理解这样的语法，但是如果你想使用这种语法，那么使用预处理器是避免错误的更安全的选择。

推荐阅读