如何一次將樣式應用於多個類？

Question

我希望兩個名稱不同的類在 CSS 中具有相同的屬性。 我不想重復代碼。

 .abc { margin-left:20px; } .xyz { margin-left:20px; }

 <a class="abc">Lorem</a> <a class="xyz">Ipsum</a>

由於兩個類都在做同樣的事情，我應該能夠將它合並為一個。 我怎樣才能做到這一點？

Answer 1

.abc, .xyz { margin-left: 20px; }

就是你要找的。

Answer 2

您可以通過用逗號分隔來為相同的屬性創建多個 CSS 聲明：

.abc, .xyz {
   margin-left: 20px;
}

Answer 3

不要重復你的 CSS

 a.abc, a.xyz{
    margin-left:20px;
 }

或

 a{
    margin-left:20px;
 }

Answer 4

如果您按以下方式使用，您的代碼可能比您編寫的更有效。 您應該添加另一個功能。

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

或

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

或

a {
margin-left:20px;
width: 100px;
height: 100px;
} 

Answer 5

只需用逗號分隔類名。

.a,.b{
your styles
}

Answer 6

如果你之前已經在他們的父母那里設置了這些類，你應該再次設置他們的父母（每次重復）如下：

parent .abc, parent .xyz

Answer 7

還有一種方法可以使用@extend通過 SCSS 來實現這一點。

Answer 8

使用 CSS 偽類:is （以前是:any和:matches ）和:where ，您可以使用逗號來匹配任何級別的多個類。

在根級別， :is(.abc, .xyz)和.abc, .xyz功能幾乎相同。 但是， :is允許只匹配選擇器的一部分，而無需多次復制整個選擇器。

例如，如果你想匹配.root .abc .child和.root .xyz .child ，你可以這樣寫代碼：

 .root :is(.abc, .xyz) .child { margin-left: 20px; }

 <div class="root"> <a class="abc"> <span class="child">Lorem</span> </a> <a class="xyz"> <span class="child">Ipsum</span> </a> </div>

:is和:where的區別在於: where在計算選擇器的特異性時被忽略：

• .root :is(.abc, .xyz) .child特異性.root :is(.abc, .xyz) .child = .root :is(.abc, .xyz) .child特異性.root .abc .child
• .root :where(.abc, .xyz) .child特異性.root :where(.abc, .xyz) .child = .root .child

兩個偽類都接受一個寬容的選擇器列表，這意味着如果一個選擇器無法解析（由於不支持的語法，要么太新，太舊或不正確），其他選擇器仍然可以工作。 這使得:即使在根級別也很有用，因為它允許使用現代 CSS 功能組合選擇器，而不必擔心一個選擇器會破壞其余的選擇器。

PS 這個問題回答了這個問題的一個更困難的變體，但是谷歌在太多的查詢中返回了這個頁面，所以我認為這個信息在這里是相關的。