Наследование 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? Я хочу применить другой CSS к div class = "x-toolbar" Не уверен, как получить к нему доступ.

Answer 1

Проблема заключается в том, что правило CSS определено для применения к:

.x-panel-myheader .x-toolbar

Это означает, что оно будет применяться ко всему, что имеет класс «панель инструментов x», но только , если оно содержится внутри чего-то другого, имеющего класс «x-panel-myheader».

Ваш HTML ничего не показывает с классом "x-panel-myheader", поэтому я не могу определить, является ли это причиной вашей проблемы или нет. Если правило CSS не работает вообще, возможно, поэтому. Если вы хотите, чтобы он применялся ко всему с помощью класса «x-toolbar», измените строку на:

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

Answer 2

Проще говоря, правила говорят, что более поздние объявления CSS перезаписывают более ранние объявления. А атрибуты "style" всегда перезаписывают атрибуты "class".

Если вы перезаписываете класс, каскадный из нескольких элементов (.x-panel-myheader .x-toolbar), вам нужно будет указать полный «путь» при перезаписи. В вашем примере это будет:

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

Однако, если вы хотите перезаписать то, что объявлено в атрибуте "style", вы можете либо добавить флаг! Важный, либо вам придется изменить сам стиль:

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

ОБНОВЛЕНИЕ: похоже, что вы отредактировали элемент div с атрибутом x-panel-myheader, поэтому мои примеры не обязательно будут работать с новым кодом.

Answer 3

Откуда взялся -myheader в вашем CSS? В вашем HTML нет x-panel-myheader.

Answer 4

Единственный способ применить другой стиль к панели инструментов x - это ввести стиль ПОСЛЕ предыдущего определения. Таким образом, вы отменяете предыдущее определение.

Если у вас есть контроль над источником, вы можете добавить стиль под другим именем и просто поместить его в список классов для каждого из этих элементов.