Проблемы с переопределением семантических стилей пользовательского интерфейса

У меня есть вопрос: как проще всего переопределить стили из семантического пользовательского интерфейса? Я компилирую семантические листы и у меня есть несколько других листов css, которые я сделал. Например, у меня есть контейнер для столбцов, и я хочу скрыть его в начале, поэтому я добавил класс в div, а затем установил для него значение «display: none». Но это все равно видно, потому что некоторые другие стили в семантике важнее. Это очень неудобно. Как это исправить и установить свои стили вместо семантических?


semantic-ui
person Aver    schedule 11.09.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

На самом деле это не относится к семантическому пользовательскому интерфейсу. Вам понадобится минутка, чтобы узнать об специфичности в CSS. К счастью, существует множество хороших ресурсов, таких как Specificity Wars Энди Кларка.

Вооружившись этой информацией, загрузите в браузере «инструменты разработчика» и inspect элемент, который у вас есть. проблема с. На панели CSS вы увидите все CSS, примененные к этому элементу. Вещи вверху имеют более высокую специфичность CSS. Скорее всего, вы увидите свой пользовательский CSS с перечеркнутой линией. Это говорит о том, что браузер применил стиль, но что-то другое переопределило его. Что-то еще будет объявлениями на панели CSS, которые не отображаются с одной строкой.

Когда вы сравните их, вы, вероятно, заметите (после прочтения «Войн за особенности» или подобных им), что элементы без зачеркивания используют более конкретный селектор. Возможно, ваш селектор CSS имеет только один класс, а селектор SemanticUI имеет два типа .class-foo.class-bar — в этом случае селектор SemanticUI «выиграет» войну.

Есть несколько способов обойти это, но самый простой — сделать ваш селектор более конкретным (или иметь больший «вес» на языке войн специфичности). Опять же, есть несколько способов сделать это, но, возможно, самый простой — добавить id в какой-нибудь родительский/обертывающий контейнер, поскольку id имеют большой «вес» специфичности. Затем используйте этот идентификатор в своих селекторах пользовательского стиля.

<div id="my-wrapper"> 
    <div class="item"></div>
    <div class="some-other-item"></div>
    <!-- all of your HTML here --> 
</div>

Затем вы можете использовать идентификатор в своем CSS:

#my-wrapper .item {
    color: I-Will-Beat-You-CSS-Library;
}
person Will    schedule 12.09.2015

arrow_upward
2
arrow_downward

Хотя использование ids и !important может решить проблему, в моем случае проблема заключалась в том, что объявление для семантики появилось после моего пользовательского объявления CSS (site.css), поэтому оно, очевидно, имело приоритет. Все, что мне нужно было сделать, это переместить мою пользовательскую декларацию CSS ниже semantic.css, и вуаля! это сделало работу за меня.

До:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link href="/Content/site.css" rel="stylesheet"/>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
</head>

После:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <script src="/Scripts/semantic.js"></script>
  <link href="/Content/semantic.css" rel="stylesheet"/>
  <link href="/Content/site.css" rel="stylesheet"/>
</head>
person megamaiku    schedule 11.09.2017