blocks|key|1138334|text|.abc,+.xyz+{+margin-left:+20px;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1138335|就是你要找的东西。|unstyled|1138336|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.abc, .xyz { margin-left: 20px; }
</code></pre>

is what you are looking for.

blocks|key|1353571|text|对于同一属性，可以使用多个CSS声明，用逗号分隔它们：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1353572|.abc,+.xyz+{
+++margin-left:+20px;
}|code-block|syntax|javascript|1353573|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can have multiple CSS declarations for the same properties by separating them with commas:

<pre><code>.abc, .xyz {
 margin-left: 20px;
}
</code></pre>

blocks|key|1353598|text|不要重复你的CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1353599|+a.abc,+a.xyz{
++++margin-left:20px;
+}|code-block|syntax|javascript|1353600|或|1353601|+a{
++++margin-left:20px;
+}|1353602|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Don’t Repeat Your CSS

<pre><code> a.abc, a.xyz{
 margin-left:20px;
 }
</code></pre>

OR

<pre><code> a{
 margin-left:20px;
 }
</code></pre>

blocks|key|1353640|text|如果您使用如下所示，您的代码可能比您编写的代码更有效。您应该添加另一个功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1353641|.abc,+.xyz+{
margin-left:20px;
width:+100px;
height:+100px;
}+|code-block|syntax|javascript|1353642|或|1353643|a.abc,+a.xyz+{
margin-left:20px;
width:+100px;
height:+100px;
}+|1353644|1353645|a+{
margin-left:20px;
width:+100px;
height:+100px;
}+|1353646|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

If you use as following, your code can be more effective than you wrote.
You should add another feature.

<pre><code>.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 
</code></pre>

OR

<pre><code>a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 
</code></pre>

OR

<pre><code>a {
margin-left:20px;
width: 100px;
height: 100px;
} 
</code></pre>

blocks|key|1138478|text|只需用逗号分隔类名。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1138479|.a,.b{
your+styles
}|code-block|syntax|javascript|1138480|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

just seperate the class name with a comma.
<pre><code>.a,.b{
your styles
}
</code></pre>

blocks|key|1353691|text|如果您以前设置过这些类的父类，则应再次设置它们的父类(每次重复)，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1353692|parent+.abc,+parent+.xyz|code-block|syntax|javascript|1353693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

And if you have set these classes with their parents before, you should set them with parents (repeat each time) again as below:
<pre><code>parent .abc, parent .xyz
</code></pre>

blocks|key|1353717|text|还有一种方法可以使用@extend通过SCSS实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1353718|entityMap|0|LINK|mutability|MUTABLE|url|https://sass-lang.com/documentation/at-rules/extend^0|A|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is also a way to use <a href="https://sass-lang.com/documentation/at-rules/extend" rel="nofollow noreferrer">@extend</a> to achieve this with SCSS.

I want two classes with different names to have the same property in CSS. I don't want to repeat the code.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.abc {
 margin-left:20px;
} 
.xyz {
 margin-left:20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="abc"&gt;Lorem&lt;/a&gt;
&lt;a class="xyz"&gt;Ipsum&lt;/a&gt;</code></pre>
</div>
</div>


Since both classes are doing the same thing, I should be able to merge it into one. How can I do that?

How can I apply styles to multiple classes at once?

我希望两个不同名称的类在CSS中有相同的属性。我不想重复代码。​.abc { margin-left:20px;} .xyz { margin-left:20px;}<a class="abc">Lorem</a><a class="xyz">Ipsum</a>​由于两个类都在做同样的事情，我应该能够将其合并...

问如何一次将样式应用于多个类？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何一次将样式应用于多个类？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何一次将样式应用于多个类？
EN