如何为同一CSS类应用不同样式？如何复用类样式添加元素级样式？

没问题，我来帮你一步步搞定这两个CSS问题～

问题1：如何为同一个CSS类应用不同的样式？ #

要给同一个类名的元素设置差异化样式，常用的方法有这几种，实用性拉满：

• 结合上下文选择器：利用元素所在的父容器或兄弟元素做区分，让同一个类在不同区块呈现不同样式：

  /* 通用基础样式 */
  .my-class { padding: 10px; border-radius: 4px; }
  
  /* 头部区域的.my-class */
  header .my-class { background: #f0f0f0; color: #333; }
  
  /* 侧边栏区域的.my-class */
  .sidebar .my-class { background: #2ea3f2; color: #fff; }
  

• 添加额外类名：给需要特殊样式的元素多套一个类，既保留原类的通用样式，又能精准覆盖特定属性：

  /* 通用按钮样式 */
  .btn { padding: 8px 16px; border: none; cursor: pointer; }
  
  /* 警告按钮的特殊样式 */
  .btn.warning { background: #ffc107; color: #212529; }
  /* 危险按钮的特殊样式 */
  .btn.danger { background: #dc3545; color: #fff; }
  

  对应的HTML写法：

  <button class="btn">默认按钮</button>
  <button class="btn warning">警告按钮</button>
  

• 使用伪类/伪元素：借助:hover、:first-child这类状态或位置伪类，给同一个类的不同状态、位置元素设置样式：

  .list-item { margin: 5px 0; }
  /* 第一个列表项加粗高亮 */
  .list-item:first-child { font-weight: bold; color: #2ea3f2; }
  /* 鼠标悬停时的背景变化 */
  .list-item:hover { background: #f8f9fa; }
  

• 属性选择器：如果元素带有自定义属性，可通过属性选择器区分样式：

  .card { border: 1px solid #eee; }
  /* 标记为"精选"的卡片样式 */
  .card[data-type="featured"] { border-color: #2ea3f2; box-shadow: 0 2px 8px rgba(46, 163, 242, 0.1); }
  

问题2：为.mp_m_blurb_underline_sliding元素统一样式，同时添加元素级下划线颜色 #

看你现有的代码，h4已经设置了position: relative，推测下划线是通过::after伪元素实现的（你现有代码里没写这部分，我先补上基础的下划线滑动逻辑）。要在不重复完整样式的前提下修改下划线颜色，用额外类名就能轻松实现，具体方案如下：

第一步：补全通用的下划线滑动样式 #

先把所有.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::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2ea3f2; /* 默认下划线颜色 */
  transition: width 0.5s ease-out;
}
.mp_m_blurb_underline_sliding h4:hover::after {
  width: 100%;
}

第二步：添加元素级的下划线颜色（无需重复完整样式） #

如果要给某个特定的.mp_m_blurb_underline_sliding元素修改下划线颜色，只需要给它加一个额外类（比如.underline-red），然后只覆盖颜色属性即可：

/* 额外类：将下划线改为红色 */
.mp_m_blurb_underline_sliding.underline-red h4::after {
  background: #dc3545;
}
/* 可选：同步修改悬停时的文字颜色 */
.mp_m_blurb_underline_sliding.underline-red h4:hover {
  color: #dc3545;
}

对应的HTML使用方式：

<!-- 默认下划线颜色的模块 -->
<div class="mp_m_blurb_underline_sliding">
  <h4>默认标题</h4>
  <p>内容示例...</p>
</div>

<!-- 红色下划线的模块 -->
<div class="mp_m_blurb_underline_sliding underline-red">
  <h4>红色下划线标题</h4>
  <p>内容示例...</p>
</div>

要是你只想给单个h4改颜色，也可以直接给h4加额外类：

.mp_m_blurb_underline_sliding h4.underline-green::after {
  background: #28a745;
}

HTML写法：

<div class="mp_m_blurb_underline_sliding">
  <h4 class="underline-green">绿色下划线标题</h4>
  <p>内容示例...</p>
</div>

这样所有基础样式（布局、过渡、字体等）都只写一次，只针对需要修改的颜色属性做覆盖，完全满足你“无需重复完整样式”的需求。

内容的提问来源于stack exchange，提问作者user4466931