如何使用自定义 css 将标题从 H2 更改为 H3？答案

【问题标题】：How do I change heading from H2 to H3 with custom css?如何使用自定义 css 将标题从 H2 更改为 H3？
【发布时间】：2022-01-01 03:38:26
【问题描述】：

我正在使用这个 google maps 插件，它不允许您更改地图标题的样式。开发人员告诉我用自定义 CSS 更改它。

由于我是初学者，我不知道该怎么做，因为我没有元素的 id，只有类。

当我从 h2 更改为 h3 时，这就是我想要它做的事情，但这只是在检查器中。我需要永久应用它。

<h2 class="widgettitle">Marinas and tours</h2>

然后我在插件文件中唯一能找到的小部件标题是以下代码，在将其从 h2 更改为 h3 后，它完全没有任何作用：

  // initialize widgets
  static function widgets_init() {
    $options = GMWP::get_options();

    register_widget('GoogleMapsWidget');

    if (!$options['disable_sidebar']) {
      register_sidebar( array(
        'name' => __('Google Maps Widget PRO hidden sidebar', 'google-maps-widget'),
        'id' => 'google-maps-widget-hidden',
        'description' => __('Widgets in this area will never be shown anywhere in the theme. Area only helps you to build maps that are displayed with shortcodes.', 'google-maps-widget'),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
      ));
    } // if activated
  } // widgets_init

我希望我能得到一些帮助

【问题讨论】：

您能否再解释一下为什么您必须更改 HTML 而不是按照建议的那样更改 CSS？

标签： html css plugins html-heading

【解决方案1】：

我通过使用 notepad++ 在我的网站文件中查找“widgettitle”来解决此问题。有一个包含小部件标题默认值的 php 文件，我将它们从 h2 更改为 h3。

    Line 271:       'before_title'   => '<h2 class="widgettitle">',
Line 1168:  *                                 Default `<h2 class="widgettitle">`.
Line 1197:      'before_title'  => '<h2 class="widgettitle">',

【讨论】：

【解决方案2】：

也许你可以通过 Javascript 来做，创建一个新的 h3 元素并将旧 h2 的内容替换为新的 h3 元素：

var h2 = document.getElementsByClassName('widgettitle')[0];

var h3 = document.createElement('h3');
h3.innerHTML = h2.innerHTML;

h2.parentNode.insertBefore(h3, h2);
h2.parentNode.removeChild(h2);

【讨论】：

【解决方案3】：

这可能不是一个好的答案，但一个简单的解决方法是将其添加到您的 css：

.widgettitle { 
    // default h3 styles
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

样式代码取自SO question。

【讨论】：

谢谢，但我只需要更改标题编号。我已经在我的主题中定义了样式，我只需要将这个元素从 h2 更改为 h3。