Ответ 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.

Update

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

Ответ 2

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

У меня был почти тот же вопрос, что и у OP, но также нужно было выделить строку. Ниже я расскажу, как я увеличил (?) Sean Ryan и включил его в свою последнюю реализацию, что позволяет добавлять класс к любому произвольному элементу, в том числе к "tr" или "td"

См. это на bootply.com

CSS

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

FYI: In the Qaru 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>

Ответ 3

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

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

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

Ответ 4

Используйте

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

Не было бы решением, которое вместо применения класса добавило бы css в элемент?