페이지의 특정 부분에서 스타일을 해제해야합니다.

Question

A/B 웹 사이트를 만들고 있습니다. 주로 재미로. 그것은 두 부분으로되어 있습니다. 인터넷에서 페이지를 가져 와서 컨테이너 (div # 페이지)에 표시합니다. 그래서 example.com을 가져 와서 기본을 변경하고 div에 표시합니다. 여태까지는 그런대로 잘됐다.

위 부분은 내 사이트의 콘텐츠입니다 (div # 헤더). 메뉴, 양식 (URL 지정) 및 다른 몇 가지를 보여줍니다.

문제는 : example.com의 CSS는 내 사이트의 요소에도 적용됩니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까? example.com의 CSS는 #header가 아닌 #page에만 적용됩니다.

이 방법이 있습니까? 리셋 도우미를 사용할 수는 있지만 최적의 솔루션처럼 보이지는 않습니다. 모든 것을 재정의해야합니다. 게다가 내 사이트의 CSS가 example.com에 적용됩니다.

아이디어가 있거나 실행 취소 할 수 있나요?

Answer 1

.css의 모든 선택기 앞에 더 구체적인 선택기를 배치하지 않도록 시도 할 수 있습니다.

그래서 만약 스타일 선택기의 무리했다 :

.main{ ... } 
#myContainer { ... } 
#menu .menu-item { ... } 
p { ... } 

를 (또는 될 일 사상)

이 그런 다음 HTML에서 최상위 요소에 ID를 넣어 (예 : BODY 요소) 'myPage'와 같은 내용을 입력 한 다음 모든 CSS 선택기를 다음으로 변경하십시오.

#myPage .main{ ... } 
#myPage #myContainer { ... } 
#myPage #menu .menu-item { ... } 
#myPage p { ... } 

Answer 2

example.com을 iframe으로 분리하십시오. 해당 페이지의 자바 스크립트와 상호 작용하려면 다음을 수행하십시오. answer