Как сделать файл CSS более важным, чем другой файл CSS?

Ответ 1

Нет такой магии. CSS имеет свои собственные принципы, такие как каскад, и вы не можете отключить их.

Вы можете поместить ссылку на css.css после ссылки на bootstrap.min.css, но это всего лишь один из факторов в процессе разрешения правил CSS. Добавление !important, которое обычно является симптомом неправильного дизайна, является еще одним фактором: правило !important в более раннем файле может переопределить ваше правило !important, если его селектор имеет более высокую специфичность.

Чтобы переопределить правила CSS, вам необходимо проанализировать правило, которое вы хотите переопределить, и настроить правило, которое "выигрывает", по принципам каскада.

Ответ 2

Простой, включите более важный файл CSS.

Ответ 3

Когда вы включаете таблицу стилей, она перезаписывает все объявления ранее включенных таблиц стилей. Если вы измените свой выбор на:

<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

Bootstrap позже будет включен и перезапишет свойства css.css.

Надеюсь, что это поможет.

Ответ 4

Я могу привести только пример.

Предположим, что Bootstrap.css имеет следующее .rules #world {border:0px;} [специфика 110]

и css.css имеет следующее div #world{border:20px;} [специфичность 101]

В этом случае bootstrap.css всегда будет переопределять css.css. Итак, я советую вам добавить контейнер ко всему вашему контенту - дайте этому контейнеру id..let say "god", а затем добавьте префикс .god ко всем вашим стилям в css - но опять же, это не так просто, и многое зависит от того, как вы правильно оцениваете свои вычисления.

#god div #world{border:20px;}

Это длинная тема, как указывал кто-то другой, поэтому вам придется в основном знать, что делает все загрузочное устройство на вашей странице, и что делает css.css.

Вы всегда можете найти эту замечательную статью, которая никогда не стареет http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Ответ 5

Я думаю, вы могли бы сделать одну вещь: включить только css.css и @import "css/bootstrap.min.css" в css.css, чтобы ваш код был таким

Внутри html

<link href="css/css.css" rel="stylesheet">

и Внутри css.css

@import "css/bootstrap.min.css"

.bootstrap_class{//your style..}
.hero-unit{background: red;}

Используя этот трюк, вы можете переопределить стиль бутстрапа без каких-либо показов результатов для головной боли.

Ответ 6

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

ex: display: inline! important;

Ответ 7

Обратитесь к последнему элементу в списке, который всегда будет переопределять предыдущие таблицы стилей

Ниже будет заставлять вашу страницу соответствовать 980px, поскольку она отменяет предыдущее свойство таблицы стилей

Пример

Style1.css

 #main{ width:1000px;}

Style2.css

 #main{ width:980px;} 
      or  
 #main{ width:980px !important;} /* if needed only */

HTML

<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<div id="main"></div>

Ответ 8

Если вы работаете с bootstrap, эта статья может быть полезна:

fooobar.com/info/375115/...