CSS -如何管理具有相同值的多个类?

Question

我有一些css代码为H1-H6标题添加边距。我想看看是否有一种方法可以使它更短、更清晰，而不必每次都重复同样的规则。可以加个变量

对不起，我是新来的，我不知道这是否真的可以做到。下面我发布了一些我尝试过的代码，它们很好，但我不认为这是最佳的实践。有更好的方法吗?我相信，对这个问题的更好的管理可以对css的许多其他方面有用。

我已经试过了

.article-heading > div h1 { margin-bottom: 12px!important; } 
.article-heading > div h2 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h3 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h4 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h5 { margin: 24px 0px 12px 0px!important; } 
.article-heading > div h6 { margin: 24px 0px 12px 0px!important; } 

和

.article-heading > div h2, .article-heading > div h3, .article-heading > div h4, .article-heading > div h5, .article-heading > div h6 { margin: 24px 0px 12px 0px!important; } 

Answer 1

请尝试如下操作:

.article-heading>div h1 {
margin: 0px 0px 12px 0px!important;
}
.article-heading>div :is(h2, h3, h4, h5, h6) {
margin: 24px 0px 12px 0px!important;
}

<div class="article-heading">
<div>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
</div>
</div>

new:is() CSS伪类可以在一个选择器中完成。

上面的是你如何在一个容器元素中定位所有标题的例子。

大多数浏览器现在都支持:is()，但请记住，大多数在2020年之前制作的浏览器不支持没有前缀的情况下，所以如果需要支持旧版本的浏览器，请小心使用此方法。

在某些情况下，您可能希望使用:where()伪类，它与:is()非常相似，但具有不同的特异性规则。

Answer 2

根据我的经验，你的问题有两个答案1.**在简单的HTML/CSS **你可以用var()如:<style> :root{--marginElement:24px 0px 12px 0px;}</style>使用它在任何地方，你想在特定的页面通过margin:var(--marginElement);，

2 **反应**在react中，您只需在object中创建一个变量存储值像const marginElement = {margin:"24px 0px 12px 0px"}样式为attr

Answer 3

我不确定你的HTML看起来像什么。一个快速的解决方案是创建一个像margin这样的类，然后在需要使用该类的地方在HTML文件中使用它。

一样:

.article-heading>div .margin {
margin: 24px 0px 12px 0px!important;
}

<div class="article-heading">
<div>
<h1 class="margin">Heading 1 using .margin</h1>
<h2 class="margin">Heading 2 using .margin</h2>
<h3 class="margin">Heading 3 using .margin</h3>
<h4 class="margin">Heading 4 using .margin</h4>
<h5 class="margin">Heading 5 using .margin</h5>
<h6 class="margin">Heading 6 using .margin</h6>
</div>
</div>