".class"和".class,.class .class"之间的区别？

Question

PrimeFaces文档中的以下摘录表明,标题中描述的两个选择器之间存在差异:

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

有人可以向我解释第二个选择器(".ui-widget .ui-widget")的重要性吗？我理解它匹配类"ui-widget"的元素,它们本身就是同一个类的其他元素的子元素,但是第一个选择器已经没有选择它们了吗？

Answer 1

当.ui-widget进入.ui-widget(所以没有组合选择器),那么font-size将是90%的90%,使用选择器.ui-widget .ui-widget,通过使用!important将其初始设置为90%

这将做两件事:

1. 使用ui-widget类将组件的字体大小设置为90%(父组件的)
2. 使用ui-widget类设置组件的字体大小,并将ui-widget类的另一个组件的子项设置为90%(父组件)

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

如果没有为其定义的样式.ui-widget .ui-widget,则应用默认的font-size:90%样式.ui-widget会导致嵌套字体大小增加ui-widgets.

通过添加.ui-widget .ui-widget字体大小设置为90%的更具体的选择器,无论嵌套组件的深度如何,都将确保获得一致的字体大小.

Answer 2

这很重要.如果在某些css文件中定义了一些其他css规则,则可能需要覆盖特定元素的那些通用规则.请考虑此方案.

在这里,我们有另一个Div和另一个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;
}

Answer 3

编辑:正如@Robin Kanters和其他人所指出的那样,添加.class .class选择器 - 特异性是一个微小的差别.(这可以在这里看到)

否则,.class .class选择器是多余的.

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

和

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

产生相同的结果.

小提琴

您可以在上面的小提琴中看到单个.ui-widget选择器足以产生font-size的递归继承.