Что означает определение нескольких классов и как оно должно работать?

Question

Я пытаюсь отладить проблему jqueryui css, которая привела меня к этому вопросу -

Мы находим, что в jqueryui css есть определения классов, такие как:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
    { border: 3px solid transparent; background: #FFF 0px 0px; font-weight: bold; color: White;  }

Теперь обратите внимание, что между ui-widget-content и ui-state-default нет запятой.Что означает это определение класса?

если я определю .ui-button .ui-widget-content .ui-state-default переопределит ли это определение выше, если .ui-button фактически предшествует другим в атрибуте class элемента?

Answer 1

Это иерархический селектор.

.ui-widget-content .ui-state-default

Означает выбрать все те дочерние элементы с классом ui-state-default, чей родитель имеет класс ui-widget-content.

---

Я пишу пример для вас, чтобы вы могли понять это , увидев это в действии .

1. Разметка

<div class="ui-tabs">
    <div class="ui-widget-content">
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div></div>
    </div>
</div>

<div class="ui-button">
    <div class="ui-widget-content">
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div></div>
    </div>
</div>

2. CSS

.ui-widget-content .ui-state-default{
    background-color: red;
    border: 1px solid black;
    display: block;
    height: 100px;
    width: 100px;
}

.ui-button .ui-widget-content .ui-state-default{
    background-color: green;
    border: 3px dashed yellow;
}

3. Объяснение

Все DIV с классом ui-state-default, у которых есть родительский элемент с классом ui-widget-content, будут применять все свойства первого правила CSS, кроме тех DIV s, у которых родитель имеет класс ui-parent , чье правило background-color будет перезаписано.