html - SCSS嵌套问题

我正在尝试在div中设置H3和p标签的样式。

我有这段代码（没有设置p标签的样式）-

.marketing-single-page-titles{
h3 {
  margin: 0;
  padding: 0;
p {
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  color: $marketing-blue;
  font-weight: bold;
}}}

而这个代码块（即p标签的样式）-

.marketing-single-page-titles p {
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  color: $marketing-blue;
  font-weight: bold;
}

是否有理由忽略第一个块中p标记的样式？

最佳答案

正确设置代码格式将显示p应该嵌套在h3中

下面显示的代码格式正确，突出显示了您的问题：

.marketing-single-page-titles {
  h3 {
    margin: 0;
    padding: 0;

    p {
      margin: 0;
      padding: 0;
      position: relative;
      top: -5px;
      color: $marketing-blue;
      font-weight: bold;
    }
  }
}

应该如何（注意闭合花括号的位置）：

.marketing-single-page-titles {
  h3 {
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
    padding: 0;
    position: relative;
    top: -5px;
    color: $marketing-blue;
    font-weight: bold;
  }
}

关于html - SCSS嵌套问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41419222/