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

Question

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

EDIT:

Все, что я хочу, чтобы иметь возможность предварять удостоверение «#content» для каждого селектора в файле CSS.

Answer 1

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

Поиск: ([,|\}][\s$]*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)
Replace с: $1#content $2

Разбивка Regex

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

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

Answer 2

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

Answer 3

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

1. Подождите до окна нагрузок и все стили применяются
2. захватить элементы, которые вы хотите, примененные стили нетронутыми
3. Получить свои стили и применять его рядный

Для реализации кросс-браузера вы можете использовать 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 

Плагин:

/* 
* 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); 

Answer 4

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

Поиск: ([,|\}][\s$]*)((?|\/\/.*[\s$]+|.*\/\*.*\*\/[\s$]*|@media.*\{[\s$]*|)*)([\.#]?-?[_a-zA-Z]+[_a-zA-Z0-9-]*)

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

Редактировать

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

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

Regex Pattern *

(^(?:\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 Мартинес Пек выпустил background: linear-gradient(to bottom, #ae9e9e, #454545); и вопрос с @font-face

Answer 5

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