uni-app 编写样式时分号后的属性会自动覆盖前面属性的值

uni-app 编写样式时分号后的属性会自动覆盖前面属性的值

示例代码：

height: 152rpx;display: flex;align-items: center;
height: 152rpx;display: flex;align-items: justify-content


## 操作步骤：


1

预期结果：

自动追加在分号后面，不要覆盖前面的值


## 实际结果：


把前面属性的值覆盖掉了

bug描述：

在样式的class里写样式属性分号后面属性会自动覆盖掉分号前面的属性的值


| 信息类别         | 详细信息       |
|------------------|----------------|
| 产品分类         | uniapp/H5      |
| PC开发环境操作系统 | Mac            |
| PC开发环境操作系统版本号 | 10.15.7        |
| HBuilderX类型   | 正式           |
| HBuilderX版本号 | 3.4.7          |
| 浏览器平台       | Chrome         |
| 浏览器版本       | 1              |
| 项目创建方式     | HBuilderX      |

更多关于uni-app 编写样式时分号后的属性会自动覆盖前面属性的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

HBuilderX 3.4.10-alpha已修复此问题。
如果不想使用alpha版本，css代码可以换行写。

更多关于uni-app 编写样式时分号后的属性会自动覆盖前面属性的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，多谢

在 uni-app 中编写样式时，如果你在同一个选择器中多次定义相同的属性，后面的属性值会覆盖前面的属性值。这是因为 CSS 的层叠规则（Cascading Rules）决定了样式的优先级和覆盖关系。

示例

.my-class {
  color: red;
  color: blue;
}

在这个例子中，color: blue; 会覆盖 color: red;，因此最终文本的颜色会是蓝色。

注意事项

  1. 优先级：如果两个选择器的优先级相同，后面的样式会覆盖前面的样式。
  2. !important：如果你使用了 !important，它会提高该属性的优先级，即使它出现在前面，也会覆盖后面的属性。
    .my-class {
  color: red !important;
  color: blue;
}
回到顶部