Подготовить все CSS-селектора

Есть ли текстовый фильтр или функция javascript/jquery, которая добавит все css-селектора в таблицу стилей с чем-то? Я пытаюсь повлиять только на один div с twitter bootstrap, но это влияет на боковую панель за его пределами, есть ли все-таки сделать это? (Я не хочу использовать iframe.)

EDIT:

Все, что я хочу, это возможность добавить идентификатор "#content" для каждого селектора в файле css.

Ответ 1

Ваш комментарий в ответ на sabithpocker говорит мне, что вместо динамического изменения ваших стилей вы пытаетесь статически изменять свой CSS. Я думаю, что это было бы проще всего с регулярным выражением:

Найти: ([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
Заменить на: $1#content $2

Распределение регулярных выражений

([,|\}][\s$]*) - Находит } или , из предыдущего стиля, за которым следуют пробелы (пробелы/табы: \s, новые строки: $). Закрывающая фигурная скобка\запятая не позволяет регулярному выражению смотреть в тело вашего стиля.
[\.#]? - соответствует начальному # или . в имени стиля, если он присутствует.
-?[_a-zA-Z]+ - имена стилей CSS могут начинаться с подчеркивания или букв. Кроме того, имена стилей могут быть добавлены тире.
[_a-zA-Z0-9-]* - Соответствует остальной части имени стиля. Это можно опустить, но было бы неплохо узнать имя стиля для всех стилей, которые были изменены.
$1#content $2 - } (или ,) и пробелы оставлены так, как он был найден ($1). За ним следует введенный текст #content (обратите внимание на пробел), за которым следует имя стиля ($2).

Я тестировал это в Notepad ++, и он работает на моих таблицах стилей.
Следует отметить, что если ваш CSS не сжат (и является многострочным), вам понадобится редактор, который поддерживает многострочные регулярные выражения (Notepad ++ делает).

Ответ 2

Это можно сделать проще с использованием SCSS. Просто возьмите свой существующий CSS, вставьте его все с помощью # my-new-selector {...}, а затем запустите его через SCSS-компилятор CSS (есть онлайн-инструменты, которые могут сделать это, если вам не нужно ничего устанавливать.

Ответ 3

Обходной путь (если это действительно нужно сделать так):

Подождите, пока не будут загружены окна и все стили.
Возьмите элементы, которые вы хотите использовать неприменимые стили.
Получить их стили и применить их inline

Для реализации кросс-браузера вы можете использовать плагин jquery, показанный ниже:

$('#mydiv *').each(function(){
    $(this).css($(this).getStyleObject());
    });

Затем отключите исходную таблицу стилей

document.stylesheets[n].disabled = true;
//or use this : $('link[title=mystyle]')[0].disabled=true;

//n should be index of style sheet -- counts external + internal style sheets

Plugin:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

Ответ 4

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

Ответ 5

Улучшено на RustyTheBoyRobot и BoltClock ♦ ответьте, чтобы разрешить комментарии и медиа-запросы.

Найти: ([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)

Заменить на: $1$2 #content $3

Изменить

Мне было доведено до сведения, что код, который я предоставил, работает только для PHP.

Вот улучшенная версия, которая должна работать в Javascript и PHP

Шаблон регулярного выражения *

(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)

Полный пример *

var outputString = inputString.replace(
    /(^(?:\s|[^@{])*?|[},]\s*)(\/\/.*\s+|.*\/\*[^*]*\*\/\s*|@media.*{\s*|@font-face.*{\s*)*([.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]*{)/g,
    "$1$2 #content $3"
);

Это также должно исправить проблему @Mariano Martinez Peck с background: linear-gradient(to bottom, #ae9e9e, #454545); и проблему с @font-face