Игнорирование свойства из класса 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; 
} 

Теперь в этом случае флажок должен быть перемещен влево в любом направлении. Но в этот флажок не добавляется как левое, так и правое свойство. Есть ли способ игнорировать право: 0px и только слева: 0px может использоваться в случае языков RTL?

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; 
}