" .class“和".class，.class .class”的区别？

Question

以下摘录自PrimeFaces文档，似乎在标题中描述的两个选择器之间存在差异：

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

有人能向我解释一下第二个选择器(“..ui widget..ui widget”)的重要性吗？我知道它匹配类“ui-小部件”的元素，这些元素本身就是同一个类的其他元素的子元素，但是这些元素不是已经被第一个选择器选中了吗？

Answer 1

编辑：正如@Robin和其他人所指出的那样，添加.class .class选择器-专用性只是一个小的区别。(这可以看到这里)

否则，.class .class选择器是多余的。

.ui-widget {
     font-size: 90% !important;
}

和

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

产生同样的结果。

小提琴

您可以在上面的小提琴中看到，单个..ui小部件选择器足以产生字体大小的递归继承。

Answer 2

当.ui-widget在.ui-widget中(所以没有组合选择器)时，字体大小将为90% of 90%，而选择器.ui-widget .ui-widget则通过使用！.ui-widget .ui-widget将其设置为90%。

这将做两件事：

1. 将具有ui-widget类的组件的字体大小设置为90% (父类的)。
2. 将具有ui-widget类的组件的字体大小设置为90% (父组件的)，并且是具有ui-小部件类的另一个组件的子组件。

标准CSS中需要.ui-widget .ui-widget的原因是为了防止相反的问题:嵌套ui小部件中的字体大小增加。

如果没有为.ui-widget .ui-widget定义的样式，应用于.ui-widget的默认字体大小: 90%将导致嵌套ui-widgets中的字体大小增加。

通过添加字体大小设置为90%的更具体的.ui-widget .ui-widget选择器，您将确保得到一致的字体大小，无论您嵌套组件有多深。

Answer 3

这是很重要的。如果在某些css文件中定义了其他css规则，则可能需要此规则来覆盖特定elements.Consider的泛型规则。

这里，我们有另一个分区和另一个css规则。

看看这个用.class.class演示和没有.class.class的演示。在这种情况下，它具有重要意义。覆盖其他一些一般css规则

<div class="ui-widget">
    single
</div>

<div class="ui-widget">
    parent
    <div class="ui-widget">
        child
    </div>
</div>

<div>
    <div class="ui-widget">
        child
    </div>
</div>

css

.ui-widget, .ui-widget .ui-widget {
     font-size: 150% !important;
}

div .ui-widget{
     font-size: 20% !important;
}