Я хочу, чтобы все классы, теги и идентификаторы в css.css перезаписывались поверх bootstrap.min.css без повторения классов, тегов и идентификаторов bootstrap.min.css.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
Нет такой магии. CSS имеет свои собственные принципы, такие как каскад, и вы не можете отключить их.
Вы можете поместить ссылку на css.css после ссылки на bootstrap.min.css, но это всего лишь один из факторов в процессе разрешения правил CSS. Добавление !important, которое обычно является симптомом неправильного дизайна, является еще одним фактором: правило !important в более раннем файле может переопределить ваше правило !important, если его селектор имеет более высокую специфичность.
Чтобы переопределить правила CSS, вам необходимо проанализировать правило, которое вы хотите переопределить, и настроить правило, которое "выигрывает", по принципам каскада.
Простой, включите более важный файл CSS.
Когда вы включаете таблицу стилей, она перезаписывает все объявления ранее включенных таблиц стилей. Если вы измените свой выбор на:
<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
Bootstrap позже будет включен и перезапишет свойства css.css.
Надеюсь, что это поможет.
Я могу привести только пример.
Предположим, что 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/
Я думаю, вы могли бы сделать одну вещь: включить только 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;}
Используя этот трюк, вы можете переопределить стиль бутстрапа без каких-либо показов результатов для головной боли.
если вы не можете изменить файлы, а порядок вызова файла css не работает, вы всегда можете использовать! important, но это будет много времени, потому что вам нужно добавить его на каждую строку css.
ex: display: inline! important;
Обратитесь к последнему элементу в списке, который всегда будет переопределять предыдущие таблицы стилей
Ниже будет заставлять вашу страницу соответствовать 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>
Если вы работаете с bootstrap, эта статья может быть полезна: