Применить <style> правила к другому элементу вместо

Question

У меня есть элемент <style>, который применяет некоторые глобальные стили, такие как A { color: red }, в отличие от моей таблицы стилей, которые стили A { color: green } (в качестве примера).

Как изменить весь стиль в моем элементе <style> так, чтобы он содержался и применяется только к стилю для дочерних элементов родительского элемента, который я указываю.

A { color: red } становится #myelem A { color: red }

.myclass { display: none; } становится #myelem .myclass { display: none }

бы я должен найти <style> элемент, разобрать содержимое, заменить каждый селектор затем обновить содержимое элемента с его фиксированным?

Есть ли альтернатива изменению содержимого моего элемента <style>?

Почему я это делаю? У меня есть HTML, который хранится в базе данных, которую я хочу редактировать (это CMS). HTML может содержать <style> элементов, и я не могу доверять тому, кто пишет CSS, чтобы записать его в область видимости. Я мог бы запретить пользователям использовать элемент <style>, но я бы предпочел. У меня нет контроля над оригинальным CSS. Только то, что я верну в свой сервер/клиентский код.

Если все остальное терпит неудачу, я мог бы загрузить его в плавающий фрейм ... :(

---

Ооооий Firefox поддерживает не <style scoped>, который относится только к родителю, где <style> элемента находится в DOM. Жаль, что не поддерживается в любом другом браузере :(

Answer 1

Используйте child селектор:.

#yourElement > a { color: green; } 

Answer 2

Как уже упоминалось, у ожно использовать:

<style scoped> 
... 
</style> 

Хотя только изначально поддерживается в Firefox, вы можете использовать эту JQuery polyfill, чтобы заставить его работать в других браузерах.

Answer 3

JQuery:

$("parent_type > children_type").css("param","value"); 

пример

$("#myid > div").css("display","none"); 

here «s ссылку

JSFiddle