如何使用相同的 CSS 类应用不同的样式？答案

【问题标题】：How can I apply different styling with the same CSS class?如何使用相同的 CSS 类应用不同的样式？
【发布时间】：2020-07-19 14:21:06
【问题描述】：

如何为名为“mp_m_blurb_underline_sliding”的类的元素应用相同的样式，并应用一些元素明智的样式而不重复整体？

这里我需要为下划线的颜色应用额外的样式。

.mp_m_blurb_underline_sliding h4 {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    font-size: 5px;
    font-weight: 600;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;}
 
.mp_m_blurb_underline_sliding  p {
    padding-top: 10px;}
 
.mp_m_blurb_underline_sliding h4:hover {
    color: #2ea3f2;}

【问题讨论】：

同一类但风格不同？您需要一个附加标准来决定应用哪种样式。
.mp_m_blurb_underline_sliding h4, .another_style1, .another_style2, { ... } .another_style1 { 颜色：红色； } .another_style2 {颜色：绿色； }
使用 CSS 自定义属性/变量将是一种现代解决方案。

标签： css class

【解决方案1】：

您需要为下划线颜色的样式设置不同的类。

.main_css_styling{
  //lines of codes of styling
}
.underline_blue{
  //blue
}
.underline_red{
  //red
}

<h4 class="main_css_styling underline_blue"><h4/> //same main css styling
<h4 class="main_css_styling underline_red"><h4/> //same main css styling

结论：通过为下划线颜色设置不同的类，您无需重复大量编码，只需将 2 个具有不同颜色的类放置在每个标题标签中即可。

【讨论】：

【解决方案2】：

如果您要求多个类名的样式相同，例如通用函数 - 您需要使用 LESS/SCSS，两个库都有 Mixin，Mixins 类似于编程语言中的函数。

看看这里，LESS mixin 的文档 http://lesscss.org/features/#mixins-feature

例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

但是，如果您不想使用这些库，则需要为这些“可变”样式创建一个单独的类，并将其添加到所需的两个类名的标记中。

例如，为具有特定颜色的下划线颜色创建一个类 - Yellow_mp_m_blurb_underline_sliding、blue_mp_m_blurb_underline_sliding，无论您想命名它...

然后像这样使用它

<p class="mp_m_blurb_underline_sliding yellow_mp_m_blurb_underline_sliding"> ... </p>

【讨论】：