Javascript 在CSS中添加.classA和.classB.classA有什么区别？

问题是当我在CSS中放置

.show

而不是

.box.show

时 偶数框不是从左边来的。 我只是想知道为什么？因为我觉得他们是一样的。 但在这段代码中，它们的行为似乎有所不同

const-box=document.querySelectorAll（'.box'）；
window.addEventListener（'scroll'，（）=>{
常量触发点=窗内高度*4/5；
框。forEach（（框）=>{
const boxTop=box.getBoundingClientRect（）.top；
如果（箱顶

选择器的特殊性就是这样工作的（）

如果您查看开发者工具中的

.show

元素，您将看到

转换

样式被

.box:nth类型（偶数）

类覆盖，因为伪类

：nth类型

具有更高的特异性

---

您可以在

上检查它。classA

以CSS class

classA

作为元素的目标，并且具有0,0,1,0的CSS特异性。比如说10

classA.classB

（或

.classB.classA

）以两个类

classA

和

classB

的元素为目标。这次的特殊性为20（两个类）

为什么这个奇怪的词对你很重要

具有以下默认转换值的选择器的特异性为

10

：

.box{
  transform: translateX(4000%);
}

下面的选择器

.box:nth-of-type(even){
   transform: translateX(-4000%);
}

特殊性为

20

，并将覆盖选择器中的相同CSS属性，其特殊性较低。因此，即使是动画也可以通过覆盖

.box{transform:translateX（4000%）；}

来工作

但是

.show{transform:translateX（0%）；}

没有更高的特异性，因此它可能无法覆盖原始值

.box.show{transform:translateX（0%）；}

但是，它的特殊性为20，并且肯定会覆盖原始值，就像偶数元素的选择器一样

---

阅读更多关于特殊性的说明：

您还没有真正清楚地确定您希望此代码做什么，以及预期行为与预期的不同之处。花几分钟时间彻底阅读@t J感谢您的回答和解释。您刚刚保存了my Day一个更新版本的特殊性文档c可以找到答案。@BoltClock谢谢，更新答案