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作为php vendor/bin/doctrine orm:clear-cache:metadata添加时无效！任何解释？感谢

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的结构。）

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

1 个答案: