Question

我有这个.css来控制不同div中的h1 h2和h3s。

  #about h1, h2, h3{
  font-family: 'Noto Serif', serif;
  font-style: italic;
  color: #797979;
}


#consult h3{
  color: #797979;
  margin-top: 59px;
  margin-bottom: 31px;
}

我有两个不同的div，一个是#consult，另一个是#about。

然而，＃consult h3继承了#about h3？

中的所有内容

Answer 1

选择器字符串中的逗号（#about h1, h2, h3）完全打破了选择器。例如，您首先是CSS规则;

#about h1, h2, h3{
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}

与此相同;

#about h1 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}
h2 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}
h3 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}

你真正想要的是这个;

#about h1, #about h2, #about h3{
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}

这相当于此;

#about h1 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}
#about h2 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}
#about h3 {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}

Answer 2

您需要这样做，因为现有规则h3包含表单中的每个h3。通过#about h3，规则将仅适用于h3范围内的#about，这会阻止h3覆盖您的#consult h3。

#about h1, #about  h2,  #about h3{
    font-family: 'Noto Serif', serif;
    font-style: italic;
    color: #797979;
}

#id h1，h2，h3 {}被前一个#id h1，h2，h3 {}覆盖

2 个答案: