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

IE / Edge

不支持matching selector

Answer 2

如果他们总是成为#load的直接孩子，你可以做

#load > * {
  font-size: 80%;
  margin: 2%;
}

但请注意，这些规则适用于#load

的任何直接孩子

否则你也可以选择给所有人上课，例如load-child

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

Answer 3

在CSS中，某些属性继承了封装html元素的属性（除非手动覆盖）。所以这意味着你可以做到：

＆＃13;

#load {
  font-size: 40px;
  margin: 2%;
}

＆＃13;

<div id=load>
  <p>hello from p</p>
  <h3>hello form h3</h3>
</div>

＆＃13;

正如您所看到的，here font-size默认为继承属性。（这个参考是CSS2 - 我无法在任何地方找到CSS3？）

因此，这意味着需要的#load css现在封装了其子h和p元素。

注意我只是在示例中放置了40px的可见性。

https://www.w3.org/wiki/Inheritance_and_cascade是关于元素继承的快速阅读，但总结一下;

继承允许我们在高级元素上声明属性，并允许这些属性向下遍历所有后代元素。默认情况下只继承某些属性，但可以使用inherit关键字强制继承。

Answer 4

除非你想要一切，否则不会。您可以使用#load *获取所有内容。

如何在css中选择多个类？

4 个答案: