CSS 상속

Question

.x-panel-myheader{overflow:hidden;zoom:1;color:#15428b;font:bold 11px tahoma,arial,verdana,sans-serif;padding:5px 3px 4px 3px; border:1px solid #99bbe8;line-height:5px;background: transparent url(../images/default/panel/white-top-bottom.gif) repeat-x 0 -1px;} 
.x-panel-myheader .x-panel-body { background-color: Transparent; } 
.x-panel-myheader .x-toolbar { background-color:inherit; border:0px ;} 

` 
<div class="x-panel x-panel-myheader x-border-panel x-panel-noborder" id="pnlHeader" style="width: 608px; top: 0px; left: 0px;"> 
    <div class="x-panel-bwrap" id="ext-gen62"> 
    <div class="x-panel-body x-panel-body-noheader x-panel-body-noborder" id="ext-gen63" style="width: 608px; height: 39px;"> 
     <div class="x-toolbar x-small-editor x-abs-layout-item" id="tbarTest" style="top: 17px; left: 5px;"> 

`

방법 CSS 상속 작동합니까? div = "x-toolbar"div에 다른 CSS를 적용하고 싶습니다. 액세스 방법을 잘 모르겠습니다.

Answer 1

간단히 말해서, 규칙은 나중에 CSS 선언이 이전 선언을 덮어 씁니다. 그리고 "스타일"속성은 항상 "클래스"속성을 덮어 씁니다.

여러 요소 (.x-panel-myheader .x-toolbar)를 캐스케이드하는 클래스를 덮어 쓰는 경우 덮어 쓸 때 전체 "경로"를 포함시켜야합니다. 당신은 "스타일"속성 선언 뭔가를 덮어 쓰려면 다음, 그러나

.x-panel-myheader .x-toolbar { 
    /* new styles here */ 
} 

을 당신은 중요한 플래그를 추가 할 수 있습니다 또는 당신은 스타일 자체를 수정해야 할 것 : 샘플에서는이 될 것입니다! :

.x-panel-myheader .x-toolbar { 
    /* new styles here */ 
    background-color: #000 !important; 
} 

UPDATE : 내 예는 반드시 새로운 코드로 작동하지 않습니다 있도록에서 x 패널 myheader 속성을 가진 div 요소를 편집 한 것 같습니다.

Answer 2

x- 도구 모음에 다른 스타일을 적용하는 유일한 방법은 이전 정의 이후에 스타일을 삽입하는 것입니다. 이렇게하면 이전 정의를 무시할 수 있습니다.

소스를 제어 할 수있는 경우 다른 이름으로 스타일을 추가하고 각 요소의 클래스 목록에 추가하면됩니다.

Answer 3

CSS에있는 -myheader의 출처는 어디입니까? HTML에 x-panel-myheader이 없습니다. 그것은 "X-도구 모음"의 클래스가 무엇에 적용된다는 것을 의미합니다

.x-panel-myheader .x-toolbar 

하지만 만 경우 :

Answer 4

문제는 CSS 규칙을 적용하도록 정의되어 나타납니다 이 클래스는 "x-panel-myheader"클래스를 가진 다른 클래스 안에 들어 있습니다.

HTML에 "x-panel-myheader"클래스가 표시되지 않으므로 문제의 원인인지 여부를 판단 할 수 없습니다. CSS 규칙이 전혀 작동하지 않는 것으로 보인다면 아마도 그 이유 일 것입니다. "x-toolbar"클래스로 모든 항목에 적용하려면 다음 행으로 변경하십시오.

.x-toolbar { background-color:inherit; border:0px ;}