常见的编写CSS代码时容易出现的错误

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

1. 拼写错误：选择器、属性或属性值的名称拼写错误。

/* 示例：拼写错误的选择器 */
.my-clas {
  color: red; /* 选择器名拼写错误，应为 .my-class */
}

2. 缺少分号：在属性之间缺少分号。

/* 示例：缺少分号 */
.my-class {
  font-size: 16px
  color: blue; /* 缺少分号会导致后续属性失效 */
}

3. 属性值引号不匹配：属性值中的引号不匹配。

/* 示例：引号不匹配 */
.my-class {
  content: "Hello; /* 引号不匹配会导致后续的样式被影响 */
}

4. 不正确的选择器：选择器未正确匹配元素。

/* 示例：不正确的选择器 */
button:hover {
  background-color: yellow;
}

5. 未关闭注释：未正确关闭注释。

/* 示例：未关闭注释 */
/* 这是一个注释 /* 这是一个嵌套注释 */ 这是另一个注释 */

6. 不合理的选择器嵌套：过度嵌套选择器，增加了样式的复杂性。

/* 示例：过度嵌套选择器 */
div ul li a {
  color: green;
}

7. 使用不支持的属性或值：使用不支持的CSS属性或属性值。

/* 示例：使用不支持的属性 */
.my-class {
  some-unsupported-property: value; /* 未支持的属性会被忽略 */
}

8. 忘记添加单位：未为数值属性添加正确的单位。

/* 示例：未添加单位 */
.my-class {
  font-size: 16; /* 忘记添加单位，应为 font-size: 16px; */
}

9. 不正确的层叠顺序：未正确理解CSS层叠规则，导致样式不按预期生效。

/* 示例：不正确的层叠顺序 */
.my-class {
  color: blue;
}
.my-class {
  color: red; /* 后面的规则覆盖了前面的规则 */
}

10. 未引入CSS文件：忘记在HTML中引入CSS文件。

```html
<!-- 示例：未引入CSS文件 -->
<link rel="stylesheet" href="styles.css">
```