#html #css #semantic-ui #fomantic-ui
Вопрос:
Я хотел бы отредактировать стиль ui main container класса в семантическом пользовательском интерфейсе. В настоящее время у нас есть:
lt;div class="ui main container"gt;lt;/divgt; Однако я хочу, чтобы был применен следующий стиль:
lt;div class="ui main container" style="width:1825px"gt;lt;/divgt; Я попробовал следующий CSS-селектор:
lt;stylegt; .ui.main.container { width: 1825px; } lt;/stylegt; Однако это не влияет на стиль div, как ожидалось. Я попытался переместить местоположение lt;stylegt; тега и попробовать различные комбинации css-селекторов, но безрезультатно. Есть ли какая-либо причина, по которой стиль не отменяется? Как я могу имитировать эффект встроенного стиля (который фактически применяется)?
Комментарии:
1. Согласно @Anjs, вам часто придется применять Важное переопределение для стилей SUI. Вы можете использовать F12 в Chrome, затем щелкнуть правой кнопкой мыши элемент контейнера и в конечном итоге найти его на вкладке Элементы инструментов разработчика. Оттуда вкладка стили на rhs показывает, как стилизован элемент, и вкладка Вычисленные также полезна. Из них вы можете видеть, что ваш стиль на уровне элементов переопределяется стилями SUI. Вы можете вручную опробовать определенные настройки стиля с/без !важно, чтобы увидеть эффект. Установка жестко заданного значения может быть не лучшей практикой.
Ответ №1:
Попробуйте добавить !важно, чтобы переопределить стиль. Как показано ниже
.ui.main.container { width: 1825px !important; }