多重类定义是什么意思，它应该如何工作？ [英] What does multiple class definition mean and how is it supposed to work?

问题描述

我试图调试一个jqueryui css问题，这导致我的这个问题 -

我们发现在jqueryui css，有类定义如下：

  .ui-state-default，.ui-widget-content .ui-state-default，.ui-widget-header .ui-state-default 
 {border：3px solid transparent;背景：#FFF 0px 0px; font-weight：bold;颜色：白色; } 
  

现在，注意ui-widget-content和ui- state-default之间没有逗号。这个类定义是什么意思？

如果我定义.ui-button .ui-widget-content .ui-state-default如果一个.ui按钮实际上在其他语言之前，在元素的类属性中？

解决方案

这是分层选择器。

 code> .ui-widget-content .ui-state-default 
  

其父类具有 ui-widget-content 类的 ui-state-default >

---

我正在写一个例子，让你通过 查看操作 。

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 broken yellow; 
} 
  

3。说明

全部 DIV 与类 ui-state-default 有父类的 ui-widget-content 将应用第一个CSS规则的所有属性，除了 DIV 的父类具有 ui-parent 类，其 background-color 规则将被覆盖。

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.

这篇关于多重类定义是什么意思，它应该如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！