Подтвердить что ты не робот

Может ли один файл CSS иметь приоритет над другим файлом CSS?

Я в Лондоне работаю над приложением, а парень html/css находится в Нью-Йорке. Он ежедневно отправляет мне обновления по электронной почте, поскольку у нас нет настройки источника, которую мы можем использовать, я постоянно делаю небольшие изменения в его CSS, поэтому каждый раз, когда я получаю от него новый файл, я должен повторно использовать все свои изменения к этому, и, очевидно, чем больше работы я делаю, тем дольше это занимает каждый раз.

У меня возникла идея создать собственную отдельную таблицу стилей, но есть ли способ сообщить браузеру о том, чтобы дать мой sylesheet более высокий приоритет и перезаписать любой из его стилей, которые имеют одинаковое имя и атрибуты класса?

Это не будет публичный сайт, поэтому мы будем поддерживать только последние браузеры.

4b9b3361

ОТВЕТЫ

Ответ 1

Это зависит от того, как вы их устанавливаете в своем заголовке. Так что-то вроде этого будет работать:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

Последний будет поднят.

И полезная ссылка о таблицах стилей здесь: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

Смотрите также: Приоритет в CSS, если вышеуказанное не работает для вас.

Надеюсь, что это понятно.

Ответ 2

Я лично строго препятствую использованию! важно. Узнайте, что действительно важно от здесь.

Вы должны знать:

.some-class .some-div a {
    color:red;
}

Всегда важнее, чем (порядок измерения не имеет значения в этом случае):

.some-class a {
    color:blue;
}

Если у вас (два объявления с одинаковым уровнем):

.some-class .some-div a {
    color:red;
}

.some-class .some-div a {
    color:blue;
}

Используется более поздняя декларация. То же самое происходит с файлами, включенными в тег заголовка, как писал @Kees Sonnema.

Ответ 3

Правила CSS применяются последовательно. Итак, все, что вам нужно сделать, это включить ваш CSS последний, после всех остальных.

Ответ 4

Правила Css являются последовательными, вы должны делать две вещи в ваших html файлах

  • Включите ваш CSS как последний css
  • Добавить! важно для всех атрибутов css в вашем файле css Eg: position : absolute !important;

который должен служить вашей цели

Ответ 5

Где-то я читал, что речь идет не о том, какой файл CSS вызывается до или после, но на самом деле загружает сначала. Например, если ваш первый файл CSS достаточно длинный, чтобы продолжать загрузку, а тот, который находится под (который по базовой теории должен иметь более высокий приоритет) уже загружен, эти строки, загруженные после этого, будут иметь более высокий приоритет. Это сложно, но мы должны знать об этом! Техника со спецификой кажется мне законной. Таким образом, более конкретный (#someid.someclass div, а не .someclass div) более высокий приоритет.

Ответ 6

Я нашел сообщение здесь в stackoverflow. Я думал, это может вам помочь.

Эффективный способ объединить 2 больших файла CSS

Если вы хотите слить свои файлы, то это будет полезно, я думаю.

Указание CSS в более конкретном ключе также поможет вам.

как:

td.classname{}
table.classname{}

Ответ 7

Он работает следующим образом:

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

второй style.css:

@import 'third-style.css';

Последний импортированный стиль - это тот, который все правила придерживаются. Например:

первый style.css:

body{
    size:200%;
    color:red;
}

второй style.css:

@import 'third-style.css';
p{
    color:red;
}

третий-style.css:

p{
    color:green;
    size:10%
}

Результирующими стилями будут:

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

Примечание:, если вы добавляете важные правила, это разные. Например:

первый style.css:

body{
    size:200% !important;
    color:red !important;
}

второй style.css:

@import 'third-style.css';
p{
    color:red;
}

третий-style.css:

p{
    color:green;
    size:10%
}

Результат:

body{
    size:200% !important;
    color:red !important;
}

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

Ответ 8

Я использую правило приоритета CSS, как показано ниже:

  • Первое правило как встроенный css с html, который будет запускать любой вид css.

  • Второе правило в качестве ключевого слова use! important в объявлении css после значения.

  • Третье правило как порядок приоритета ссылки на таблицу стилей заголовка html (основная таблица стилей CSS после пользовательской таблицы стилей CSS).

В основном пользователь хочет использовать третье правило, также хочу, чтобы marge bootstrap css настраивался на пользовательский css, пример ниже:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">   

<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">