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

【问题标题】：Difference between ".class" and ".class, .class .class"?“.class”和“.class，.class .class”之间的区别？
【发布时间】：2014-01-29 12:32:50
【问题描述】：

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

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

有人可以向我解释第二个选择器（“.ui-widget .ui-widget”）的意义吗？我知道它匹配“ui-widget”类的元素，这些元素本身是同一类的其他元素的子元素，但第一个选择器不是已经选择了这些元素吗？

【问题讨论】：

是的，好像有点多余。
其中有一个!important 的事实让我相信这是试图覆盖CSS 中某处的另一个.ui-widget .ui-widget（可能具有不同的字体大小）。
同意，这绝对看起来比任何@MrLister 都更像是一种特异性破解。

标签： css primefaces css-selectors

【解决方案1】：

当.ui-widget 在.ui-widget 中时（所以没有组合选择器），那么字体大小将是 of 90% 的 90%，使用选择器 @ 987654324@，最初使用 !important 设置为 90%

这将做两件事：

将具有 ui-widget 类的组件的字体大小设置为 90%（父母）
使用 ui-widget 类设置组件的字体大小，并且是具有 ui-widget 类的另一个组件的子级达到 90%（父母）

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

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

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

【讨论】：

这就是我的解释
那么你是说有区别还是没有区别？
在嵌套类的情况下，这两种方法都不会给你 90% 的 90% 吗？
我不确定您为什么会收到所有的赞成票，因为您所描述的情况并非如此 (see this fiddle that has one group with the single selector and one group with the doubled)。
@ScottS, BlueRaja：没错。这里的问题是双重的：1）百分比值与属性一起使用，其中百分比值引用父元素中的相同属性，2）这个属性被应用于层次结构中的每个元素，因为它们都匹配选择器证明了。这会导致效果在层次结构中的每个级别的元素 以乘法方式堆叠。换句话说，这不是层叠或覆盖样式的问题。这里真正的问题是百分比值和font-size 属性。

【解决方案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;
}

【讨论】：

如果你删除.ui-widget .ui-widget，行为是完全一样的。（而div .ui-widget与情况无关）
（实际上，如果您删除 .ui-widget .ui-widget，行为是不同 - 但这只是因为 div .ui-widget 与它混淆。从等式中删除它，并且冗余出现了。）

【解决方案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 选择器足以产生字体大小的递归继承。

【讨论】：

@sree - 没有区别 - 看到这个更新的小提琴：jsfiddle.net/danield770/9AM6X/4 - 我只是删除了 .class .class 选择器 - 你得到相同的结果......所以 .class .class 选择器是多余的
啊。谢谢你。我之前没有注意到。
肯定有区别：specificity.

【解决方案4】：

请注意，我在示例中使用了可笑的字体大小来简化数学运算。

所以假设您的基本字体大小为 100 像素。

HMTL

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

如果你只有规则

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

父 .ui-widget 的字体大小为 90 像素（100 像素的 90%）。
子 .ui-widget 的字体大小为 81 像素（90 像素的 90%）。

有规律的

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

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

【讨论】：

感谢您的解释，这听起来合乎逻辑，可能是本意。然而，正如@Danield 指出的那样，两者之间似乎没有如此不同的行为，在这两种情况下，子元素都会逐渐变小。与此同时，我也对其进行了测试，得出了相同的结论。
你对第一种情况的描述对于任何一种情况都是正确的，see this fiddle。