What does multiple class definition mean and how is it supposed to work?

I am trying to debug a jqueryui css 开发者_如何转开发issue which has led me to this question -

We find that in jqueryui css, there are class definitions such as follows :

.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;  }

Now, notice there is no comma between ui-widget-content and ui-state-default. What does this class definition mean?

if I define .ui-button .ui-widget-content .ui-state-default should it override the above definition if a .ui-button actually precedes the others in the class attribute of the element?

---

It is the hierarchical selector.

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

Means select all those child elements with the class ui-state-default whose parent has the class ui-widget-content.

---

I am writing an example for you to grasp it by seeing it in action.

1. Markup

<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. Explanation

All DIVs with the class ui-state-default that have a parent with the class ui-widget-content will have applied all the properties of the first CSS rule, except those DIVs whose parent has the class ui-parent, whose background-color rule will be overwritten.