css - 忽略 CSS 类中的属性

Question

您好我正在尝试在我的网站中实现 RTL。我在 CSS 中有一个这样的复选框

.labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -1px;
}

在 RTL 语言的情况下，一个类将被动态添加到 html 文件中，并且一个新样式将被添加到 CSS 中，如下所示。

.locale-right-to-left .labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: -1px;
}

现在在这种情况下，复选框应该移到最左边的方向。但它没有发生，因为 left 和 right 属性都添加到了复选框中。有什么方法可以忽略 right:0px 并且在 RTL 语言的情况下只能使用 left:0px 吗？

Answer 1

添加right: auto;到您的 RTL 类

   .locale-right-to-left .labeled-checkbox .checkbox {
      position: absolute;
      top: 0px;
      left: 0px;
      right: auto; 
      margin-top: -1px;
    }

Answer 2

right: auto在您的样式中使用.locale-right-to-left .labeled-checkbox .checkbox以覆盖right规则

https://developer.mozilla.org/en-US/docs/Web/CSS/right

Answer 3

如果您动态添加一个 css 类，您也可以删除一个。所以添加一个类locale-left-to-right作为默认值，这样你就可以编写以下内容：

.locale-left-to-right .labeled-checkbox .checkbox {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: -1px;
}