Переопределяющие стили в семантическом интерфейсе реагируют

1113 Специфика король. Только время может потребоваться для использования !important, когда присутствует встроенный стиль, и библиотека не предоставляет способа каким-либо образом отключить свойство (плохой выбор архитектуры).

Следующий список типов селекторов увеличивается в зависимости от специфики:

Селекторы типов (например, h1) и псевдоэлементы (например, :: before).

Селекторы классов (например, .example), селекторы атрибутов (например, [type = "radio"]) и псевдоклассы (например,: hover).

Селекторы идентификаторов (например, #example).

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Посмотрите на первую кнопку пользовательского интерфейса для семантики Пользовательский интерфейс здесь состоит из следующего HTML:

<button class="ui button">Click Here</button>

CSS присоединяется через semantic.min.css:

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

Чтобы переопределить, скажем, шрифт цвет, все, что нам нужно сделать, это написать селектор, который является более конкретным, чем этот селектор. Мы можем достичь этого, комбинируя их два селектора класса (одинаково специфичные) с селектором типа (дополнительная специфичность).

Это будет выглядеть так:

button.ui.button {
  color: red;
}

Теперь, поскольку button.ui.button более конкретно описывает местоположение элемента на странице (DOM), чем, скажем, просто .ui.button, это сигнализирует браузер, что этот стиль должен переопределить предыдущее объявление. Это распространенный способ настройки темы.

Прекрасные документы здесь: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #e0e1e2 none;
    color: rgba(0,0,0,.6);
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

button.ui.button {
  color: red;
}

[ 114]