css - 如何在css中选择多个类？

Question

有没有更短的方法来选择所有这些东西只使用一次 id #load ？

#load p,
#load h1,
#load h2,
#load h3,
#load h4,
#load h5,
#load h6 {
  font-size: 80%;
  margin:2%;
}

Answer 1

你总是可以给元素添加一个类:

<h1 class="myclass"></h1>
<h2 class="myclass"></h2>
etc...

And then select them all with that class:

#load .myclass {
  font-size: 80%;
  margin:2%;
}

---

如果你使用 SASS(或任何 CSS 预处理器)那么它看起来像这样:

#load {
  p, h1, h2, h3, h4, h5, h6 {
    font-size: 80%;
    margin: 2%;
  }
}

服务器需要安装SASS，然后将代码编译成纯CSS。结果将与您在问题中发布的内容相同。

---

此外，我将此添加为一个选项，
有匹配 CSS 选择器:

#load :-moz-any(p, h1, h2, h3, h4, h5, h6) { /* firefox 4+*/
  font-size: 80%;
  margin:2%;
}

#load :-webkit-any(p, h1, h2, h3, h4, h5, h6) { /* chrome 15+, safari 5+, opera 15+ */
  font-size: 80%;
  margin:2%;
}

不支持 matching selector通过 IE/Edge