多个类定义意味着什么以及它应该如何工作？

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.解释

所有DIVS采用了类ui-state-default已经与类家长ui-widget-content会都应用了第一CSS规则的所有属性,除了那些DIV(胡)的父母有类ui-parent,它的background-color规则将被改写.