span {} 在 CSS 语法中做什么？

Question

我得到了一些示例 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",

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

Answer 1

方括号 { 和 } 定义范围以便

   body {
       color: #000;
   }

将定义 body 元素类型（css 查询选择器）的 color（文本颜色）为 #000（黑色为十六进制）

但是，如果您在使用 a precompiler 的元素中有一个元素，例如 less 用于 css 使用 less 语法。

    body {
        color: #000;
        span {
            color: #FF0000;
        }
    }

这与之前的 css 相同，但在 less 中您可以创建层次结构

body 的颜色将像以前一样设置为黑色。然后 body 元素的任何范围 child 都将其颜色设置为红色 (#FF0000)

CSS/LESS 与 HTML DOM object 模型结合使用。

Answer 2

你说得对 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 preprocessor, like SASS or LESS，这种语法当然是完全可以接受的。 CSS 预处理器编译 CSS 编写成标准 CSS 语法，并添加额外的功能，例如使用变量和条件语句。

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

span {} 在 CSS 语法中做什么？

What does span {} do in CSS syntax?

css

formatting