! 중요한 것은 인라인 스타일이없는 요소에 의해 오버라이드됩니다.

오늘 업무에서 가장 흥미로운 딜레마가 있습니다. 왜 그런 일이 일어 났는지도 짐작할 수 없습니다. 호기심은 나를 죽이는 것 뿐이야.! 중요한 것은 인라인 스타일이없는 요소에 의해 오버라이드됩니다.

우리는 클라이언트가 인라인 스타일링에 관계없이 특정 글꼴을 고집합니다. 중요한 토론과 그것을 사용해야하는 방식에 대한 논쟁을 원치 않습니다.

하지만이 상황

http://partner-dashboard.qed42.webfactional.com/partner/108/insights/homepage에 대해 매우 궁금하다 - : 아코디언 내에서 개요를보고하십시오. 그리고 폰트 패밀리에 주목하십시오.

Inspect Element on the synopsis in the accordion

.ui-widget { 
    font-family: Verdana,Arial,sans-serif; 
    font-size: 1.1em; 
} 

.insights-widget-container { 
    font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden 
    line-height: 1.5; 
    font-size: 13px; 
}

사람이이 확실히> 일어나고있는 방법에 대해 말해 주시겠습니까! 중요한의 .ui-위젯을 오버라이드 (override) 할 필요가 있습니다. 심지어 특이성을 높였습니다

#insights-widget-container { 
    font-family: "Trebuchet MS",Helvetica,sans-serif !important; //I am being overriden 
}

행운을! 누군가 이런 일이 일어나는 이유를 밝힐 수 있다면 매우 흥미로울까요?

출처

2014-11-18 Pratik Bothra

컨테이너에 적용하고 있습니다. 작동 시키려면 각 개별 항목의 font-family을 inherit으로 변경해야합니다. 그렇지 않으면 !important이 CSS 선택기의 요소에만 적용되므로 특이성에 의해 무시됩니다.

!important 자식 규칙이 설정되면 무시되지 않고 선택자에만 규칙이 적용됩니다.

예상대로 작동하면 어떤 CSS가 보이는지 상상해보십시오.

body { 
    padding: 30px!important; 
}

우리가 다음에 적용되는 padding: 30px!important 규칙을 가지고 신체의 어릴 모든 요소를 기대 :이 같은 규칙을 설정하면? 깎아 지른듯한 혼란 일 겁니다.

이 더 읽기 참조하는 것이 링크 일 수 있습니다 : W3C Wiki – Inheritance and Cascade

출처

2014-11-18 19:25:31

지금 난 그냥 바보 느낌! 그러나 빠른 답장을 보내 주셔서 감사합니다 :-) –

깎아 지른듯한 혼돈은 멋진 밴드 이름입니다. – Christina

이제 Simon Cowell이 그 의견을 읽고 X Factor의 밴드에서 낭비하는 것을 원하지 않습니다. 그러나 정말로 멋진 이름! 판타지 팀에도 맞을 수 있습니다. –

! 중요한 것은 인라인 스타일이없는 요소에 의해 오버라이드됩니다.

답변

관련 문제