Question

假设我在CSS文件中定义了两个具有相同名称的类，比如

.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
}

.ui-widget .ui-widget {
    font-size: 1em;
}

实际上我在jQuery UI文件中找到了这段代码。为什么有两节课？如果我们像下面那样写它有什么区别？

.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
    font-size: 1em;
}

Answer 1

.ui-widget .ui-widget仅适用于.ui-widget元素，该元素本身嵌套在另一个.ui-widget元素中。

E.g。

<body>
    <div class="ui-widget">
        The style will NOT be applied on this element.

        <div class="ui-widget">
            The style will be applied on this element.

            <div class="ui-widget">
                And here also, etcetera.
            </div>
        </div>
    </div>
</body>

Answer 2

第二个代表一个元素，其中ui-widget 类位于具有类ui-widget的另一个元素内。他们不是同一个选择器。

<div class="ui-widget"> <!-- font-size: 1.1em -->
    <div class="ui-widget"> <!-- font-size: 1em -->
    </div>
    <div>
        <div>
            <div class="ui-widget"> <!-- font-size: 1em -->
            </div>
        </div>
    </div>
</div>

Answer 3

如果您编写如下，父和子这两个元素将从相同的属性生效。

.ui-widget {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
    font-size: 1em;
 }

但

.ui-widget {
   font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
   font-size: 1.1em/*{fsDefault}*/;
}

.ui-widget .ui-widget {
     font-size: 1em;
}

只会跟随父母和孩子。

Answer 4

如果您应用jQuery UI样式，结果将是：

<div class="ui-widget">
    Text with font-size 1.1em
    <div class="ui-widget">
        Text with font-size 1em
        The style will be applied with ".ui-widget .ui-widget" selector
    </div>
</div>

当我们在CSS文件中定义两个具有相同名称的类时会发生什么？

4 个答案: