html - #id h1, h2, h3 { } 被之前的 #id h1, h2, h3 { } 覆盖

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;
}