如何在css中选择多个类？

是否有任何简短的方法来选择所有这些东西只使用一次ID #load？如何在css中选择多个类？

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

来源

2017-02-13 Damian Toczek

-1

不除非你想要的一切。你可以通过#load *获得一切。

来源

2017-02-13 01:00:17

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

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

，但请记住，这些规则将适用于#load

任何直接的孩子，否则你也可以选择给这些所有的一类，像load-child例如

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

来源

2017-02-13 01:00:46 dargue3

在CSS某些属性继承吨他封装html元素的属性（除非手动覆盖）。因此，这意味着，你可以简单地做：

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

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

正如你可以看到herefont-size在默认情况下继承的财产。（这个参考是CSS2--我找不到CSS3的任何地方？）

所以这意味着需要css现在封装其子h和p元素。

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

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

继承允许我们在高级元素上声明属性，并允许这些属性逐渐下降到所有后代元素。默认情况下，只有一些属性被继承，但可以通过inherit关键字强制继承。

来源

2017-02-13 01:07:19 Zze

您可以在类随时添加的元素：

<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

来源

2017-02-13 01:49:21 pol

SASS代码不适合我。我需要一个CSS文件或sass？ –

@DamianToczek这是一个预处理器，您需要将其安装在服务器上。该代码然后编译为纯CSS。完成后，结果将与您在问题中发布的代码相同。 - 如果你不能安装它，那么最好的办法是将一个类添加到你想添加它的所有元素。 - IE/Edge不支持匹配的选择器。 - 我在答案中添加了这个信息。 – pol

使用这个类会比这个css：75头更多的字母。 –

如何在css中选择多个类？

回答

相关问题