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％为90％，使用选择器.ui-widget .ui-widget，使用！important

初始设置为90％

这将做两件事：

将ui-widget类的组件字体大小设置为90％（父母）
使用ui-widget类设置组件的字体大小具有ui-widget类的另一个组件的子项为90％（of 父母）

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

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

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

Answer 2

很重要。如果在某些css文件中定义了一些其他css规则，则可能需要覆盖这些特定元素的通用规则。请考虑这种情况。

在这里，我们有另一个Div和另一个css规则。

请参阅 demo with .class.class 和 demo without .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选择器 - 特异性存在细微差别。（可以看到 here ）

否则，.class .class选择器冗余。

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

和

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

产生相同的结果。

<强> FIDDLE

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

Answer 4

注意我在示例中使用荒谬的字体大小来简化数学运算。

假设您的基本字体大小超过100px。

HMTL

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

如果你只有规则

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

父.ui-widget的字体大小为90px（100px的90％）子.ui-widget的字体大小为81px（90px的90％）。

使用规则

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

父和子.ui-widget的字体大小均为90px

“.class”和“.class，.class .class”之间的区别？

4 个答案: