Переопределить стиль li с помощью класса

Question

На моем сайте я создал этот HTML / CSS

li
{
    float: left;
    ...
}

.myclass
{
    float: right;
    ...
}

<ul>
    <li>test 1</li>
    <li class="myclass">test 2</li>
</ul>

Два элемента списка имеют одинаковый стиль, но второй не использует класс для переопределения левого числа. Почему?

EDIT: кажется, что если я использую

li.myclass
{
    float: right;
    ...
}

это работает, но я использую myclass также в div, потому что это общий класс стилей. Как я могу исправить проблему без использования li.?

Answer 1

Как говорится в вашем сообщении, вы можете перезаписать свойство float, если используете более «специфический» селектор, например li.myclass.Таким образом, вы можете перечислить два селектора в списке через запятую.

.myclass, li.myclass {
    float: right;
}

Или вы можете использовать !important, чтобы перезаписать свойство.в какой позиции в вашем CSS появляется свойство.Свойства, расположенные ниже в файле, могут перезаписывать свойства, указанные выше.

Answer 2

Исходя из вашего комментария, я думаю, что вы должны использовать таблицу, так как это похоже на то, чтобы стать таблицей.Таблицы не являются злом, если они не привыкают к работе над дизайном.

Или, если вы действительно хотите избежать таблиц, просто создайте два списка и совместите их с плавающей точкой.