Embed 위젯에 CSS 스타일을 적용하는 방법

Question

내가 소유하지 않은 사이트의 위젯을 만듭니다.

HTML을 주입 한 후, 나는 위젯의 스타일을 다음을 수행하십시오

var style = document.createElement('style'), 
    stylesString = 'minified css with a prefix for each selector eg. .my-prefix p {... }', 
    rules = document.createTextNode(stylesString); 

style.type = 'text/css'; 
if(style.styleSheet) { 
    style.styleSheet.cssText = rules.nodeValue; 
} else { 
    style.appendChild(rules); 
} 
document.getElementsByTagName('head')[0].appendChild(style); 

하지만 내 스타일은 무시하는 일부 사이트에

.

스타일을보다 정확하게 적용 할 수있는 방법이 있습니까?

내가 사용하는 (수) 원하지 않는

! 중요

• iFrame을
• 을 모든 속성에 대해

Answer 1

이 가장 가능성 중 하나를 가지고 문제의 요소에 의해 발생 (스타일을 추가하는 현재 방법을 사용하려면 !important을 사용하여 오버라이드해야합니다.) 스타일이 더 높은 selector precedence 인 스타일을 사용하는 경우에는 인라인 스타일을 사용하십시오.

나의 제안은 적어도 id을 추가하여 선택기를보다 구체적으로 만드는 것입니다.하지만 여전히 선택자가 여전히 가장 확실하다는 보장은 없습니다. 원래 사이트의 스타일 시트 품질에 완전히 미치지 못합니다.