Используйте новый CSS файл для переопределения текущего веб-сайта CSS

Ответ 1

Помимо использования !important, которое вам рекомендуется использовать в большинстве ответов, это вопрос специфики CSS

Концепция

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

Как рассчитывается?

Специфичность рассчитывается по конкатенации подсчета каждый тип селекторов. Это вес, который применяется к соответствующее совпадающее выражение.

В случае равенства специфичности к элементу применяется последнее объявление, найденное в CSS.

Некоторые эмпирические правила

• Никогда не используйте! Важный для всего сайта.
• Только используйте! Важный для css для конкретной страницы, который переопределяет общесайтовый или внешний css (например, из ExtJs или YUI).
• Никогда не используйте ! Важно, когда вы пишете плагин/мэшап.
• Всегда ищите способ использовать специфику, прежде чем даже подумать! Важно

может быть представлен 4 столбцами с приоритетом:

inline= 1|0|0|0

id= 0|1|0|0

class= 0|0|1|0

element= 0|0|0|1

Слева направо, наибольшее число имеет приоритет.

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY: 0/1/0/0 */
#id {
  background-color: green
}

/* SPECIFICITY: 0/0/1/0 */
.class {
  background-color: yellow 
}

/* SPECIFICITY: 0/0/0/1 */
section {
  background-color: blue 
}
  
/* ------------ override inline styles ----------- */

/*to override inline styles we  now use !important */

/* SPECIFICITY  0/0/1/0 */

.inline {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
          <!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
        </div>
      </section>
    </div>
  </div>
</article>

Ответ 2

Здесь веселое решение, о котором никто не упомянул.

Факты:

• Вы вообще не можете изменять HTML-страницу - без проблем!

• Вы можете изменить файлы CSS, но разработчики могут их модифицировать еще раз и удалите все сделанные вами изменения - не беспокойтесь.

• Вы не можете/не хотите использовать Javascript и JQuery - отлично.

• Вы можете добавить больше файлов на сервер - Отлично!

Позвольте сделать некоторые .htacess взломать удовольствие и прибыль!

Файл корневого файла .htaccess:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

Результат: hackedCSS3.php беззвучно подается вместо css3.css при каждом запросе.

REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html

Файл hackedCSS3.php:

<?php

// Send the right header information!
header("Content-type: text/css; charset: UTF-8");

// Output the css3.css file
echo file_get_contents("css3.css");
?>

// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }

Bonus:

Вы можете расширить это решение, включив в этот один файл .php все три файла .css (но только, скажем, css3.css, и отправьте css1.css и css2.css в черную дыру с .htaccess ) и использовать умные регулярные выражения для удаления/изменения этих CSS-разработчиков без прикосновения к каким-либо их файлам. Возможности дразнят.

Добавление:

Можете ли вы быть более конкретным, где включить эти файлы?

Файл .htaccess должен находиться в корневом каталоге документа веб-сайта. Здесь www.example.com/index.html загрузит index.html

Если файл hackedCSS3.php находится в том же каталоге, что и другой css файлы?

Он может быть в любом каталоге, указанном в файле .htaccess. Корень документа отлично. Изменение

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

к

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]

Если наш css-контент (где вы указали//Добавьте свой CSS здесь...) должны быть в тегах стиля html?

Нет. Относитесь к своему CSS-коду в этом разделе, как если бы он был .css файлом. Вам не нужны теги <style>.

Ответ 3

Чтобы использовать только CSS, лучший способ - использовать инструменты Chrome или FireFox и найдите новый стиль, который вы хотите перезаписать.

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

.newClass {
  color:red !important;
}

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

6.4.1 Каскадный порядок

6.4.1.4 Наконец, сортировка по указанному порядку: если два объявления имеют одинаковые вес, происхождение и специфичность, последний указал победы. Объявления в импортированных таблицах стилей считаются объявления в самой таблице стилей.

<a class="my-most-awesome-link its-really-cool">Most awesome link</a>

.my-most-awesome-link.its-really-cool {
  text-decoration:none !important;
  color:red !important;
}

Если вы в отчаянии, вы можете использовать javascript для удаления нежелательных css.

См. JSBin для рабочего примера.

Я нашел эту интересную технику

<script>
function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement);
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
      if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
          allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
      }
    }
}

removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>

Ответ 4

В новом CSS файле добавьте !important в блок кода, например:

если у вас есть это на css1.css:

 h2{
 color:#000;
 }

В css4.css введите один и тот же элемент, но с !important следующим образом:

 h2{
 color:#ccc !important;
 }

Следовательно, !important заставит этот стиль быть во всех отношениях стилем, установленным для элемента, к которому он применил.

Ответ 5

напишите новый css и используйте идентификатор элементов, а не класс. Также используйте! Important в css.

Ответ 6

Используйте @import url('css4.css') на одной из существующих страниц css. Затем используйте спецификацию, чтобы подчеркнуть ваш новый код ниже:

Html:

<ul class='ulclass'>
 <li class='liclass'>
  <a class='aclass>The text</a>
 </li>
</ul>

css1.css:

.aclass{
   color : red;
}

css4.css:

ul.ulclass li.liclass a.aclass{
   color: green;
}

Затем у вас будет green цвет в элементе a

Ответ 7

Альтернатива: полагайтесь на каскад вместо специфичности

В нескольких вариантах рекомендуется использовать @import, чтобы включить ваш файл css4.css, а затем изменить селектора в нем, чтобы иметь большую специфичность или использовать объявление !important, но есть еще один способ.

Вставить все содержимое css4.css в конце css3.css. Таким образом, вам не нужно полагаться на !important или специфику, потому что каскадное наследование примет ваши правила в конце файла, если они имеют одинаковую специфичность.

С помощью этого метода вы жертвуете модулярностью для более легкой реализации.

Пример вставки, основанный на каскаде:

/* Contents of css3.css */
.mycooldiv {
    font: bold 1.2em sans-serif;
    color: tomato;
}

/* Pasted contents of css4.css */
.mycooldiv {
    color: lime;
}

<div class="mycooldiv">Hello World</div>

Ответ 8

Думаю, у меня есть ответ. Способ, которым я пытался достичь этого, заключается в следующем:

1) Скажем, мой css3 - это последний CSS в списке, и у меня есть все мои изменения в css4. Я сделал копию css3 и назвал ее " css3-Original.css" и добавил мой css4 в ту же папку. Затем я создал еще один css файл под названием " css3.css" (потому что это последний из них) и добавлен импорт исходного Css3, а затем мой переопределяющий файл css4.css ниже:

css3.css (новый)

@import url("css3-Original.css")
@import url("css4.css")

Это лучший способ найти работу. Таким образом, хотя я знаю, что мой css3.css файл будет изменяться при обновлениях, но я знаю, как я могу заменить его очень легко и быстро. Я использовал! Важно в моем css4.css везде, где это необходимо (если требуется), но в основном из-за его последнего файла css, он использует этот стиль по сравнению с любыми предыдущими (если они не важны).

Спасибо за предложения, ребята. Наконец, мне удалось найти решение.

Ответ 9

Если я понимаю, что вы правы, добавив @import url(css4.css) в начало css3.css, импортируйте таблицу стилей в css3.css. Но ваши стили переопределяются стилями в css3.css. Это из-за Каскадный заказ и Specificity, Чтобы ваши стили css4.css использовались, ваши селекторы должны иметь более высокую специфичность, чем селектор в css.3.css, который вы пытаетесь переопределить.

Пример: теги <h1> будут окрашены в красный цвет.

body h1 { //this is more specific
   color: blue;
}

h1 { //this is less specific
   color: red;
}

Но поскольку вы @import url(css4.css) строка кода будет удаляться каждый раз, когда разработчики обновляют файл css3.css, это не "пуленепробиваемое решение"

У вас есть возможность добавить любой javascript на сайт? Если это так, вы можете использовать следующее решение

JQuery

$('head').append('<link rel="stylesheet" type="text/css" href="css4.css">');

Javascript

var head = document.head
  , link = document.createElement('link')

link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'

head.appendChild(link)

Источник: fooobar.com/questions/294236/...

Ответ 10

К сожалению, я должен согласиться с phari.

Цитата:

1) Вы не можете полностью изменить HTML-страницу страницы и, следовательно, не можете включить другой файл CSS. 2) Вы можете изменить файлы CSS, но разработчики могут позже их модифицировать и удалить любые сделанные вами изменения. Следовательно, вы не можете постоянно изменять файлы CSS. 3) Вы не можете/не хотите использовать Javascript и JQuery). Если все эти вещи верны, решение вашей проблемы отсутствует.

Комментирует phari on 26 марта в 14:29

Позвольте мне сломать его. Я попытаюсь изо всех сил объяснить, почему нет решения (исправьте меня, если я ошибаюсь в любом из этих вариантов);

Option1: Использование jQuery или Javascript.
Вы не можете изменять HTML-страницу на всех! Вы не хотите использовать jquery или javascript. Это означает, что все ответы на ваш вопрос, упомянутые на этой странице, которые включают jquery или javascript, не учитываются. Это не означает, что ответы, приведенные на этой странице, неверны.. В вашем случае это невозможно.

Вариант2: @import url(css4.css); На вашем сайте есть 3 css файла, которые автоматически включаются в состав веб-сайта, но, к сожалению, вы DO NOT имеете доступ к ЛЮБОЙ этих файлов css. Вы не можете поместить этот фрагмент кода в css3.css или в любой из этих файлов. Вы можете изменить файлы CSS, но разработчики могут позже их модифицировать и удалить любые сделанные вами изменения, что означает, что @import url(css4.css); также можно удалить. Также использование @import url(css4.css); было бы совершенно бесполезным. Вам нужно разместить @import url(css4.css); в конце css3.css, но это не сработает, потому что правила @import всегда должны быть первыми в документе. Если я не ошибаюсь, Илья (который прокомментировал 23 марта в 9:42) означал, что код может быть размещен в любом месте файла. @import url(css4.css); должен быть наверху. Ссылка ilia, представленная как "доказать", также указывает, что это требование , чтобы поместить ее в начале.. Проверьте две ссылки ниже. Подробнее посетите http://webdesign.about.com/cs/css/qt/tipcssatimport.htm или https://developer.mozilla.org/en/docs/Web/CSS/@import#Specifications. Вариант 2 также игнорируется.

Я не думаю, что может быть другой способ сделать то, что вы хотите сделать. Следовательно, нет решения вашей проблемы.

Ответ 11

Для повторяющихся определений CSS последнее определение будет иметь приоритет.

Если добавленный файл css4.css на самом деле ссылается после "3 css файлов, которые автоматически включаются", то определения файла css4.css должны переопределять предыдущие определения дубликатов из этих других файлов.

Если вы не видите ожидаемых результатов, используйте параметр "источник просмотра" вашего браузера, чтобы подтвердить последовательность, в которой ссылки на файлы CSS. Также используйте "Инструменты разработчика" браузера Chrome или "Firebug" для браузера Firefox, чтобы узнать, как браузер интерпретирует определения CSS, чтобы получить результат, которого вы не ожидали. Эти инструменты должны обеспечить понимание вашей проблемы.

Ответ 12

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