CSS 상속 스타일이 적용되지 않습니다.

Question

다음 DOM 구조가 있으므로 강조 표시된 클래스에 중점을 둡니다.

나는 텍스트의 색상을 변경하려면

흰색 "집계 기여". 필자는 최상위 레벨 항목에 '마커'CSS 클래스 (fmg-white)를 배치하여 페이지의 다른 요소에서이 요소의 인스턴스를 식별했습니다. 그리고 나는 하위 레벨 적용 클래스 (.x4-form-field)와 함께 '마커'클래스를 사용할 두 번째 CSS 규칙 (.x4-form-field .fmg4-html-box .fmg-white)을 만들었습니다. .fmg4-html-box)를 사용하여 DIV의 텍스트를 구체적으로 타겟팅 할 수 있습니다. 그러나 그것은 일어나지 않습니다 ... (이 마크 업은 extjs4에 의해 발행됩니다)

어떤 도움을 주실 수 있습니다.

.fmg-white 
{ 
    /* marker */ 
} 

.x4-form-field .fmg4-html-box .fmg-white 
{ 
    color: White !important; 
} 

Answer 1

당신은 잘못 선택을 적용 : 당신이 원하는 항목이 여러 클래스가있는 경우

.fmg-white .x4-form-field.fmg4-html-box 
{ 
    color: White !important; 
} 

.fmg-white가 div.x4-form-field.fmg4-html-box

의 조상이며, 당신이 그들을 밖으로 간격 대신 그들을 체인.

공백 (두 개의 선택자 사이에 있음)은 다음 항목이 이전 항목의 하위 항목임을 나타냅니다.

I.E. html div은 페이지의 모든 div를 스타일링하지만 #myDiv div의 자손 div 만 스타일을 지정하므로 #myDiv