当父级为id时，CSS规则不起作用

Question

在下面的代码中，当我使用id属性作为父属性时，margin-bottom不会被应用，而当我将它用作父class时，它会工作吗？

当父级用作margin-bottom: 10px class**:**时，正在工作

.prof {
  margin: 10px 0 0;
  .parent & {
    margin: 15px 0 0;
    position: relative;
  }

.js-prof,
.js-prof-layout {
  .prof {
    margin-bottom: 10px;
  }
}

margin-bottom: 10px 并不像 id**:**那样与父级一起工作。

.prof {
  margin: 10px 0 0;
  #parent & {
    margin: 15px 0 0;
    position: relative;
  }

.js-prof,
.js-prof-layout {
  .prof {
    margin-bottom: 10px;
  }
}

请注意，它是完全相同的页面，但唯一的区别是添加父级，因为id不工作，而添加它作为一个class工作！有什么解释吗？谢谢

Answer 1

假设缺少的}只是一个错误，这确实是一个特定的问题，正如您所想的。

翻译后的CSS的相关部分如下

.parent .prof {
  margin: 15px 0 0;
  position: relative;
}
.js-prof-layout .prof {
  margin-bottom: 10px;
}

您可以看到，prof元素的顶层规则有两个选择器类，而底部规则也有两个类。因此，底部规则具有相同的特殊性，因此覆盖顶部规则(如样式表后面所示)。

但是，如果将.parent替换为#parent，则顶层规则有一个id和一个类，从而使其具有更高的特异性，因此底层规则不会覆盖它。

一个可能的解决方案是不要在最上面的规则中分配一个margin-bottom，即只写margin-top而不是margin速记。

或者在使用更完整的选择器(如#parent .js-prof-layout .prof )之后编写新的样式规则。(这取决于HTML的结构。)