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

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的所有子元素。

---

我正在为你写一个例子seeing it in action。

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个除外其父级具有类ui-parent，其background-color规则将被覆盖。