PrimeFaces文档中的以下摘录表明,标题中描述的两个选择器之间存在差异:
.ui-widget, .ui-widget .ui-widget { font-size: 90% !important; }
有人可以向我解释第二个选择器(".ui-widget .ui-widget")的重要性吗?我理解它匹配类"ui-widget"的元素,它们本身就是同一个类的其他元素的子元素,但是第一个选择器已经没有选择它们了吗?
这很重要.如果在某些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; }
当.ui-widget
进入.ui-widget
(所以没有组合选择器),那么font-size将是90%的90%,使用选择器.ui-widget .ui-widget
,通过使用!important将其初始设置为90%
这将做两件事:
使用ui-widget类将组件的字体大小设置为90%(父组件的)
使用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%的更具体的选择器,无论嵌套组件的深度如何,都将确保获得一致的字体大小.
编辑:正如@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的递归继承.