Подтвердить что ты не робот

Как перезаписать стиль css

Я разрабатываю страницы, теперь в моем стиле css у меня есть эта строка кода

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

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

width: 25%;
float: left;

Возможно, что я могу перезаписать его во внутреннем css страницы? что будет игнорировать его?

4b9b3361

Ответ 1

Использование !important не рекомендуется, но в этой ситуации я думаю, что вам нужно -

Запишите это в свой внутренний CSS -

.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
}

Ответ 2

вместо перезаписи, создайте его как другой css и вызовите его в свой элемент как другой css (multiple css).
Что-то вроде:

.flex-control-thumbs li 
{ margin: 0; }

Внутренний CSS:

.additional li
{width: 25%; float: left;}

<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */

Ответ 3

Да, действительно. Есть три способа достичь этого, о котором я могу думать.

  • Добавьте встроенные стили к элементам.
  • создать и добавить новый <style> элемент и добавьте текст, чтобы переопределить этот стиль к ней.
  • Измените правило css.

Примечания:

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

Ответ 4

Просто добавьте

.flex-control-thumbs li {
width: auto; 
}

Ответ 5

Вы можете создать еще одно имя класса

.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}

Добавьте этот класс, когда вам нужно переопределить, как показано ниже,

<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>

И удаляйте, когда вам не нужны другие <li>

Ответ 6

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

<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
  width: auto;
  float: none;
}
</style>