페이지 CSS가 Chrome 확장 프로그램에 영향을 미치지 못하도록 방지 CSS

Question

각 페이지에 DIV를 삽입하는 Chrome 확장 프로그램이 있고 확장 프로그램에 스타일 시트가 포함 된 DIV 스타일이 적용됩니다. 일부 페이지에서는 주입 된 DIV가 의도 한 것처럼 보이지만 그렇지 않은 경우에는 그렇지 않습니다. StackOverflow 사이트 중 하나, 예를 들어 내 요소의 box-shadow 속성이 내 CSS에 ! important으로 지정되어 있음에도 불구하고 재정의됩니다.

Chrome에서 해당 요소를 검사 할 때 box-shadow 속성이 적용되지 않았지만 (내게 표시됨) 그 이유를 알 수 없습니다. 스타일 캐스케이드의 아무 것도 해당 속성을 지정하지 않습니다.

CSS 클래스를 사용하지 않고 box-shadow 속성을 요소에 직접 추가하면 CSS 관리자보기에 속성이 요소와 연결되어 있지만 그 효과는 여전히 존재하지 않습니다.

업데이트] : 코드 조각 :

여기

내가 내 코드에서 지정하는 것입니다 :

여기

.pp_bar { 
    height: 80%; 
    right: -4px; 
    top: 0px; 
    position: absolute; 
    box-shadow: -1px 0px 2px 1px #444 ! important; 
    -webkit-box-shadow: -1px 1px 2px 1px #444 ! important; 
    -moz-box-shadow: -1px 1px 2px 1px #444 ! important; 
} 

가 크롬은으로 표시 것입니다 : 여기

var $bar = $('<div>').addClass('pp_bar').css({ 
     'box-shadow': '-1px 0px 2px 1px #444', 
     '-moz-box-shadow': '-1px 0px 2px 1px #444', 
     '-webkit-box-shadow': '-1px 0px 2px 1px #444' 
    }); 

는 CSS입니다 계산 스타일 :

-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px; 
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px 
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet 

사용 된 값 (#444 0px 0px 1.2000000476837158px 0px)이 요소 스타일 (내 코드에서 지정된대로; 요소 스타일은 클래스 값 (동일한)을 무시합니다. 요소 스타일 설정이 없으면 클래스 값이 표시됩니다.

-webkit-box-shadow: #444 -1px 1px 2px 1px; 
    element.style - rgb(68, 68, 68) -1px 0px 2px 1px 
    .pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet 

내가 다음에 무엇을 시도해야합니다 :

이 제대로 작동하는 사이트에

는, 브라우저는 계산 된 스타일로 다음과 같은보고?

Answer 1

!important 플래그를 사용하여 요소 자체의 스타일을 설정하십시오. 그런 다음 스타일이 가장 높은 우선 순위를 가진 요소에 적용되고 있는지 확인할 수 있습니다.

예 :

var div = document.createElement('div'); 
// Pick any of these (the first two lines have identical results) 
div.style.setProperty('box-shadow', '0 0 3px red', 'important'); 
div.style.cssText += 'box-shadow: 0 0 3px red !important'; 

// If the HTML is generated from a string: 
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>'; 

비 예 (하지 하지 일!) : 당신은 인라인 스타일을 설정하는 여유가없는 경우

div.style.boxShadow = '0 0 3px red !important'; // Does not work! 

것은에서 specifity 높은를 달성하려고 당신의 CSS 선택자. 예를 들어 ID를 포함합니다.