일부 제 3 자 웹 사이트에 포함 된 HTML/CSS 스 니펫을 작성했습니다.
하지만 그 웹 사이트의 CSS 규칙은 내 스 니펫을 끔찍하게 보입니다. 스니 피트의 모양을 유지하려면 반드시 !이라는 중요한 키워드를 사용해야합니다.하지만이 키워드는 약 1000 시간 동안 작성해야합니다 (매우 좋지는 않습니다).
외부 .css 파일 대신 인라인 CSS를 사용할 수도 있지만 해결 방법이 아닙니다.
그렇다면 CSS 스타일을 어떻게 우아하게 보호 할 수 있습니까?HTML 스 니펫에 대해 CSS 규칙 우선 순위를 올리는 방법
div을 고유 ID와 함께 사용하는 것이 좋습니다. 그러나 호스트 페이지의 스타일 시트에있는 다른 규칙에 !important을 사용할 가능성이 있습니다. 이러한 규칙은 고유 한 ID를 사용하는 경우에도 귀하를 무효화합니다.
처음에는 iframe (항상 가능하지는 않음)에서 외부 문서를 사용하지 않는 것, !important을 사용하면 내가 볼 수있는 유일한 100 % 안전한 방법입니다.
DIF 안에 고유 한 ID로 스 니펫을 넣을 수 있습니다.
그런 다음 스 니펫의 스타일에 맞게 CSS에 스타일 시트의 항목에 대한 DIV의 ID 선택기를 포함 시키십시오.
스 니펫은 iframe 안에 포함되어야합니다.
"제 3 자 사이트 용 위젯"이 작동하는 일반적인 방법입니다.
iframe을 사용하는 경우 상위 문서의 CSS는 "HTML/CSS 스 니펫"에 영향을 줄 수 없습니다.
제가 생각할 수있는 유일한 방법은 선택기를 어떤 방식 으로든 더 구체적으로 만드는 것입니다. 예를 들어,
LI { color: red; }
LI.class { color: blue; }
<li class="class">I will be blue</li>
하지만 당신은 당신이 통제권이없는 '은 CSS의 나머지'의 자비에 정말입니다.
나는 최선의 방법은 모든 yoru에 ID와 고유 한 클래스를 넣는 것입니다. 적용 할 CSS의 나머지 부분을 원할 수도 있기 때문에 위대한 것은 아닙니다.
'! important'가 그것을하지 못한다면, 나는 선택 자 특이성을 높일 수 있다고 생각하지 않는다. – BoltClock
중요도가 모든 곳에서 지원되지 않을 수 있습니다. 이것을 참조하십시오 : http://stackoverflow.com/questions/189621/when-does-csss-important-declaration-not-work – n8wrl
! important는 인라인 스타일을 덮어 쓰지 않지만 제 3 자 웹 사이트는 HTML 태그를 수정할 수 없습니다. 그래서 이것은 사실이 아닙니다. – tsds
iframe 메소드를 사용할 수없는 경우 상위 페이지 선언에 포함 된 레벨을 확인하고 스타일 선언과 일치해야합니다 (이 경우에도 계속 적용됩니다. 그들을 지우지 마십시오. 그렇지 않으면 "! important"를 가져 오십시오 !!! 많은 사이트에서이를 제공하는 것처럼 clear.css 또는 다른 것을 찾아야 할 수도 있습니다.
일부 자바 스크립트 문제로 인해 수행 할 수 없습니다 – tsds
사이트의 CSS가 어리석은 방식으로'! important'를 사용합니까? 그렇지 않다면,'id '를 앞에 두라고 제안하는 대답은 확실히 작동해야합니다. 예를 들어,'#myWidget p {..}'/'#myWidget a'는 나머지 문서의 CSS를 덮어 씁니다. '#myWidget {/ * font, line-height와 같은 적절한 기본값을 설정하여 계단식을 상속받지 못하게 * /}'하면, 괜찮을 것입니다. – thirtydot