Css “之间的区别”；。“类”；及"；。“类、.class.class”是什么；？

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

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

---

有人能给我解释一下第二个选择器（“.ui-widget.ui-widget”）的意义吗？我知道它与类“ui widget”的元素相匹配，这些元素本身是同一类其他元素的子元素，但是第一个选择器不会选择这些元素吗？

当

.ui widget

位于

.ui widget

（因此没有组合选择器）中时，字体大小将为90%或90%，通过使用选择器

.ui widget.ui widget

，它最初设置为90%！重要的

这将做两件事：

将ui小部件类的组件的字体大小设置为90%（共 （家长）

使用ui小部件类设置组件的字体大小，并且 ui小部件类为90%的其他组件的子组件 （家长）

标准CSS中需要

.ui widget.ui widget

的原因是为了防止反向问题：嵌套ui小部件中的字体大小增加

如果没有为

.ui widget.ui widget

定义的样式，默认字体大小：应用于

.ui widget

的90%样式会导致嵌套

ui widget

中的字体大小增加

---

通过添加字体大小设置为90%的更具体的

.ui widget.ui widget

选择器，您将确保获得一致的字体大小，无论组件嵌套的深度有多深。

注意，我在示例中使用了荒谬的字体大小，以简化计算

假设你的基本字体大小是100px

HMTL

父.ui小部件的字体大小为90px（100px的90%）。
ui小部件的字体大小为81px（90px的90%）

遵守规则

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

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

---

parent和child.ui小部件的字体大小都是90px，这很重要。如果在某些CSS文件中定义了一些其他CSS规则，则可能需要重写特定元素的泛型规则。请考虑此方案。

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

请参见此和。在这种情况下，它具有重要意义。覆盖其他一些通用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>

---

编辑：正如@Robin Kanters和其他人所指出的，添加.class.class选择器-特异性有一个细微的区别。（这可以看到）

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

及

产生同样的结果

---

---

您可以在上面的提琴中看到，单个.ui小部件选择器足以产生字体大小的递归继承。

是的，似乎有点多余。事实上有一个

！重要信息

中的内容让我相信这是试图覆盖CSS中某个位置的另一个

.ui widget.ui widget

（大概是不同的字体大小）。同意，这显然更像是一个特殊性黑客@MrLister。感谢您的解释，这听起来合乎逻辑，可能就是我们的意图。然而，正如@Danield所指出的，在这两种情况下，孩子的行为似乎并没有什么不同，在这两种情况下，孩子的因素都会逐渐变小。同时，我也对它进行了测试，得出了相同的结论。您对第一种情况的描述对任何一种情况都是正确的，@sree-没有区别-请参阅此更新的小提琴：-我只是删除了.class.class选择器-您得到了相同的结果。。。因此.class.class选择器是冗余的。非常感谢。我以前没有注意到。肯定有区别：。这就是我解释的。你是说有区别还是没有区别？在嵌套类的情况下，这两种方法不是都会给你90%的90%吗？我不知道你为什么会收到所有的赞成票，因为你描述的根本不是这样（）。@ScottS，没错。这里的问题有两方面：1）百分比值与属性一起使用，其中百分比值引用父元素中的同一属性；2）此属性应用于层次结构中的每个元素，因为它们都与所演示的选择器匹配。这会导致效果在层次结构中的每一级元素上都以乘法方式堆叠。换句话说，这不是级联或覆盖样式的问题；这里真正的问题是百分比值和

font size

属性。但是，如果删除

.ui widget.ui widget

，行为完全相同。（而且

div.ui小部件

与情况没有多大关系）（实际上，如果删除

.ui小部件.ui小部件

，行为会有所不同-但这只是因为

div.ui小部件

会把它弄糟。从等式中删除它，冗余就会出现。）@JonathanHobbs这就是全部要点——如果您尝试使用其他css规则，那么这并不是多余的override@JonathanHobbs现在，这不是由提出问题的用户定义的。它来自于素数面，它是巨大的，可能有其他类似的规则，如示例中所示。问题是它已经存在了，为什么会存在。我只是给出了一个大概的答案reason@sree我实际上忽略了你的观点，那就是它是为了覆盖其他通用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>

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

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

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

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