CSS 상속을 깨는 방법?

나는 웹 위젯을 만들었습니다. 내 고객이 자신의 웹 사이트에 넣은 것. 기본적으로로드 할 때 webservice를 호출하고 클라이언트에 특정한 데이터를로드합니다.CSS 상속을 깨는 방법?

<div class="widget"> 
    <div class="container"> 
    </div> 
</div>

동적으로 내 위젯 클래스에 CSS 스타일을 적용 : 같은

는 결과가 보인다. 우리의 기업 스타일과 일관성있게 보입니다.

클라이언트 응용 프로그램 스타일이 런타임에 적용된 스타일을 덮어 쓰는 것이 문제입니다. 클라이언트가있는 경우 예를 들어

는, 내 스타일을 덮어 : 상속을 깰 수있는 방법이

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
}

있습니까? 클래스 위젯 스타일을 가진 div가 부모 스타일을 상속받지 않는다는 것을 말하면됩니다.

출처

2012-08-07 German

CSS의 각 부분에! important 태그를 사용해보세요. 그것은 중요하지 않은 것을 덮어 씁니다. – ntgCleaner

그냥 위젯을 iframe에서 실행하십시오. – Esailija

나는 당신이 말한대로 CSS 상속을 해할 수 있다고 생각지 않지만 CSS 특이성의 규칙을 따르면서 우회하려고 할 수 있습니다.

좋은 특이성 기사

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

시도 그것을 기본 스타일보다 더 높은 특이성을 제공하는 위젯에 스타일에 !important를 추가.

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
}

편집

하면 클라이언트는 또한 문제가 발생할 수 !important를 사용하는 경우. JsFiddle.com을 예제로 설정하면 문제를 찾을 수 있습니다.

도움이 되었기를 바랍니다. 이 스타일 규칙의 '비장의 카드'의로

EDIT2

참고 !important을 추가하는 경로를가는 것은 최후의 수단이어야한다.

출처

2012-08-07 17:03:23 jmbertucci

내 스타일에 중요한 태그를 추가하려고했지만 여전히 클라이언트 스타일이 내 스타일보다 우선합니다. – German

이것은 여전히 특이성 문제가 될 수 있습니다. 내 대답을 좀 더 자세히 설명하겠습니다. 그러나 나는 그 기사에 빠른 읽기를 권하는 것이 좋습니다. CSS 파일의 특수성을 계산하고 클라이언트의 스타일보다 더 높게 만드는 데 도움이됩니다. – jmbertucci

스타일 상속을 그대로 유지할 수는 없지만 스타일이 더 중요하거나 올바른 순서로로드되어 맨 위에 올 수 있도록 할 수 있습니다.

!important 태그를 확인하십시오.

또는 스타일 시트를로드 한 후에 자신의 스타일 시트가 선행 될 경우 (인라인 인 경우 제외). Javascript를 사용하면 본문이로드 된 후에 스타일을로드 할 수 있습니다 (그러나 그런 다음 "깜박임"효과가 나타납니다).

출처

2012-08-07 17:03:09

내 스타일에 중요한 태그를 추가하려했지만 여전히 클라이언트 스타일이 내 스타일보다 우선합니다. – German

중요한 태그를 사용하고 있다면 행운을 빕니다. JavaScript를 사용하지 않고 두려워 할 것입니다. –

요소를 부모 스타일로 상속하지 않을 수 없습니다.

하지만 변경하지 않을 수있는 모든 스타일을 무시할 수 있습니다. CSS의 특이성이 고객의 특이성보다 높으면 스타일이 페이지에서 우위를 나타내거나 표현됩니다.

은 참조 :

CSS Specificity via css-tricks.com

귀하의 예를 당 아래의 코드는 오버라이드 (override) 따라서 body 선언보다 더 구체적으로 그리고 것 사용 : 또한 inline styling을 시도 할 수

.widget .container { 
    font-family: Arial; 
}

출처

2012-08-07 17:08:48 PJH

. 인라인 스타일링이 가장 중요합니다. 클라이언트 재정의가 가져온 스타일 시트를 사용하면이 작업이 가능합니다.

다른 사람들이 언급 한 것처럼 다른 옵션은 !important입니다.

http://www.w3.org/TR/CSS2/cascade.html에서 관련된 사양을 읽을 수도 있습니다. 여기에서 정확히 어떻게 캐스케이드되는지 설명합니다. 위에서 언급 한 트릭이 작동하지 않는다면, 아마도 스펙이 당신에게 단서를 줄 것이거나 이것이 가능하지 않다는 것을 확실히 알게 될 것입니다.

출처

2012-08-07 17:10:40 Nasir

! important CSS 속성의 사용은 나쁜 습관으로 간주됩니다. 이는 우선 순위 충돌의 가능성을 가져오고 장기적으로 css 문제를 해결하는 것을 매우 어렵게 만듭니다. 이 문제에 대한

덜 침입적인 접근 방식은 ID로 위젯을 구분하는 것입니다, 당신의 스타일에, 같은 "보편적"선택기를 사용하는 가장 중요한 스타일 선언의 일부 재설정 :

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
}

을

예를 들면. 그런 다음 재정의를 구체적으로 정의하십시오.

출처

2015-10-22 07:49:05 Argo

CSS 상속을 깨는 방법?

답변

관련 문제