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

Question

Я использую Bootstrap 3, и у меня есть таблица с некоторыми данными. в этой таблице я применил некоторый javascript для условного форматирования, в случае если условие выполнено, я устанавливаю класс элемента в "красный"

.red {
background-color:red;
color:white;
}

Элементы HTML выглядят следующим образом:

<td class="red">0</td>

У меня теперь есть конфликт в нечетных строках, к которым применяется цвет текста, но цвет фона переопределяется следующим CSS из начальной загрузки.

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

как я могу разрешить этот конфликт и убедиться, что красный класс имеет преимущество?

Answer 1

специфичность

Ваша проблема, скорее всего, связана со спецификой. У Криса Койера есть отличная статья о специфике CSS. Я бы также посоветовал вам проверить этот удобный калькулятор специфичности.

Используя этот калькулятор, мы можем видеть, что .table-striped > tbody > tr:nth-child(odd) > td имеет специфичность 23. Как таковое, чтобы переопределить это, любое новое правило должно иметь специфичность, равную или превышающую 23. .red в 10, так что это не собирается сокращать его.

В этом случае это должно быть так же просто, как сопоставить существующую специфику, а затем добавить к ней свой класс. .table-striped > tbody > tr:nth-child(odd) > td.red дает нам специфичность 33. Поскольку 33 больше 23, ваше правило теперь должно работать.

Смотрите рабочий пример здесь: http://bootply.com/91756

!важный

В общем, вы никогда не должны использовать !important если только вы не хотите, чтобы это правило было отменено. !important это в основном ядерный вариант. Я умеренно уверен в том, что если вы понимаете специфику, вам никогда не нужно !important чтобы пользовательское правило работало правильно в такой среде, как Bootstrap.

Обновить

Подумав немного, правило, которое я здесь привожу, вероятно, слишком конкретное. Что произойдет, если вы захотите выделить ячейку на столе, который не раздет? Чтобы сделать ваше правило немного более глобальным, но при этом иметь достаточную специфику для работы с разделенными таблицами, я хотел бы остановиться на .table > tbody > tr > td.red, Это имеет ту же специфику, что и разборка Bootstrap, но также будет работать с таблицами, которые не разобраны на зебре. Обновленный пример здесь: http://bootply.com/91760

Answer 2

Во-первых, прочитайте ответ Шона Райана - он очень хороший и информативный, но мне пришлось достаточно откорректировать его ответ, прежде чем реализовывать в своем коде то, что я хотел получить четкий ответ, который может помочь следующему человеку.

У меня был почти тот же вопрос, что и у ОП, но мне также нужно было уметь выделять строку. Ниже показано, как я улучшил (?) Ответ Шона Райана и превратил его в мою окончательную реализацию, которая позволяет добавлять класс для большинства случайных элементов, в том числе для "tr" или "td".

Смотрите это на bootply.com

CSS

    /* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackru.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css

FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756

I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/

.highlight {
    background-color: lightyellow;
}


/* supersede bootstrap at the row level by being annoyingly specific 
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
    background-color: pink;
}

/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
    background-color:lightgreen;
}

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>2hi</td>
            <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>3hi</td>
          <td>This whole row should be highlighted.</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>4hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr><tr>
            <td>5hi</td>
            <td class="highlight">Just a specific cell to be highlighted</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>

Answer 3

Использование

.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

чтобы создать более конкретный селектор или ключевое слово! Important (как показано Эндрю)

Альтернативно, и, вероятно, лучше всего, вы можете создать пользовательскую конфигурацию начальной загрузки, которая не включает в себя стили таблиц (Снимите флажок Таблицы в Common CSS)

Answer 4

Можете добавить !important после каждого стиля в .red учебный класс. Добавление! Важным в основном даст CSS больший вес, что позволит вам переопределить другие стили.

Ваш CSS будет выглядеть так:

.red {
    background-color: red !important;
    color: white !important;
}

Answer 5

Вам необходимо подать заявку !important после классного стиля. потому что мы используем селектор .table-striped > tbody > tr:nth-child(odd) > td, который является более конкретным, чем правило класса и будет иметь приоритет. Так что вам нужно переопределить это с !important,

Но есть два способа это исправить:

1. использование !important сделать правило более "важным". Я бы избегал этого, потому что это сбивает с толку, когда у вас много правил, распределенных по нескольким файлам.

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

Читать css Приоритет

Answer 6

Вы можете применить значение !important после значения вы хотите иметь приоритет.

Answer 7

У меня была аналогичная проблема, также после использования !important проблема осталась.

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

Проблема решилась только после очистки истории хрома или Ctrl+Shift+R.

Answer 8

Разве это не было бы решением, что вместо применения класса, добавить CSS к элементу?