Переопределить стиль CSS

Question

Я определяю некоторые классы CSS, которые при применении к таблице будут генерировать некоторые стили по умолчанию.

Например, позволяет сказать, что я создаю класс под названием MYTABLE:

.myTable { 
    th { 
    background-color: #000; 
    } 

    td { 
    background-color: #555; 
    } 
} 

Таким образом, любая таблица с .myTable класса получили бы эти цвета на м и тд по умолчанию.

Я думал, что если другой класс должен быть назначен отдельному td, тогда он переопределит стиль по умолчанию.

Так что, если у меня был еще один класс:

.red { background-color: red; } 

И стол:

<table class=myTable> 
    <th class="red">Content</th> 
    <td>Hello!</td> 
</table> 

Я думал, что «красный» класс будет вызывать фон заголовка быть красным, а не черный. Это не относится к делу. Для того, чтобы этот класс, чтобы переопределить оригинал, он должен быть определен в пределах MYTABLE класса как так:

td.red { background-color: red; } 

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

Answer 1

Идея заключается в том, какой стиль использовать зависит от двух факторов: насколько конкретным является селектор, положение правила (последнее правило выигрывает). Пример:

p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Пункты будут синими. Другой пример:

body p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Пункты будут красными, поскольку «тело p» более конкретное.

Редактировать: Также старайтесь избегать использования! Важно. Он поддерживается, но побочным эффектом является то, что вы никогда не сможете его переопределить (когда-либо). Таким образом, используйте его только в действительно экстремальных случаях, когда у вас нет способа узнать, как создавать достаточно определенные правила (например: generic print.css).

Answer 2

Существует стандартный способ присвоить определенный стиль.

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

Answer 3

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

Для подробного объяснения специфики селектора CSS ознакомьтесь с этой страницей: CSS Specificity: Things You Should Know.

Answer 4

Есть несколько способов, вы можете использовать !important в конце декларации, как, например:

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

Кроме того, более конкретные декларации, тем более распространенным будет. Так что ничего в table.myTable td.red {} будет больше распространяться ни на что в td.red{}.

Answer 5

Правило !important переопределяет конкретное свойство в css.

Так что в случае переопределения имущества вы всегда должны использовать его со значением.

Более подробная информация о: https://css-tricks.com/when-using-important-is-the-right-choice/