如何强制修改Bootstrap+jQuery模板中自动生成的内联行高样式？

为什么会自动生成内联样式？ #

你使用的是**Revolution Slider（革命滑块）**这款jQuery插件（从tp-caption、rev-slidebg这类类名可判断），它会根据HTML中设置的data-fontsize、data-voffset等响应式参数，动态计算并生成内联样式（包括行高、字体大小），以此实现滑块的响应式适配。另外你页面里多个元素重复使用了id="lineHeight"，违反了HTML中id必须唯一的规则，会导致样式选择器失效，也是手动设置样式不生效的原因之一。同时那个appResponsiveDirective Angular指令，大概率也在动态修改元素样式，覆盖了你手动设置的值。

强制修改line-height的方法 #

1. 先修复重复ID问题 #

把所有id="lineHeight"改成唯一ID，或者换成class（比如class="line-height-target"），避免选择器冲突导致样式失效。

2. 用CSS !important强制覆盖内联样式 #

内联样式优先级最高，需要用!important强制覆盖，在全局CSS文件中添加：

/* 针对特定滑块层内的h1 */
#slide-1-layer-2 h1 {
  line-height: 30px !important; /* 替换为你需要的行高值 */
}

/* 若多个h1需要修改，用class选择器 */
.line-height-target {
  line-height: 30px !important;
}

3. 调整Revolution Slider的配置 #

直接修改HTML中的data属性，添加data-lineheight来指定行高的响应式值：

<div class="tp-caption slide-text-two tp-resizeme" ... data-lineheight="['30','30','30','25']">
  <h1 appResponsiveDirective class="line-height-target">fitness is not a destination it is a way of life</h1>
</div>

如果找不到对应data属性，可去模板的滑块初始化JS文件中，查找滑块配置项，添加行高相关设置。

4. 修改Angular响应式指令 #

找到appResponsiveDirective的代码，检查是否有动态计算并设置line-height的逻辑，将计算规则调整为你需要的行高，或者直接固定行高值。

5. jQuery动态修改（需在滑块初始化后执行） #

若以上方法无效，用jQuery在滑块加载完成后覆盖样式：

// 等待页面与滑块初始化完成
$(window).on('load', function() {
  $('#slide-1-layer-2 h1').css('line-height', '30px');
});

// 或者使用Revolution Slider的专用回调事件
$('#your-slider-id').on('revolution.slide.onloaded', function() {
  $('#slide-1-layer-2 h1').css('line-height', '30px');
});

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