css - ".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 中时(因此没有组合选择器)，则字体大小将为 90 % of 90%，使用选择器 .ui-widget .ui-widget，最初使用 !important 将其设置为 90%

这会做两件事:

1. 将具有 ui-widget 类的组件的字体大小设置为 90%( parent )
2. 使用 ui-widget 类设置组件的字体大小，并且具有 ui-widget 类的另一个组件的子级达到 90%(的 parent )

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

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

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