WordPress页面：根据H2类名精确匹配设置表格行背景色

因为你完全不懂JS/PHP，而且需要精确匹配类名避免部分匹配，纯CSS只能处理固定的类名组合，如果你的H2类是动态添加的，PHP方案会更灵活。下面是具体实现步骤：

优先方案：WordPress PHP动态生成CSS #

这个方法会自动读取当前页面H2的类名，生成对应的CSS规则，给匹配的表格行设置绿色背景，而且能保证精确匹配。

步骤1：添加自定义代码 #

你可以用WordPress的「Code Snippets」插件（不用改主题文件，避免更新丢失），或者直接把下面的代码添加到主题的functions.php文件末尾：

add_action('wp_head', 'highlight_table_rows_by_h2_class');
function highlight_table_rows_by_h2_class() {
    global $post;
    // 只在页面类型生效，如果你需要在文章里也用，可以去掉这个判断
    if (!is_page()) return;

    // 从页面内容中提取H2的类名（匹配带连字符的类）
    preg_match('/<h2 class="([^"]*-[^"]+)"/', $post->post_content, $matches);
    if (empty($matches[1])) return;

    // 拆分H2类名中的连字符，得到需要高亮的表格行类名
    $target_classes = explode('-', $matches[1]);
    $css_rules = [];

    foreach ($target_classes as $class) {
        // 用[class~="..."]实现精确匹配：只匹配独立的类名，避免部分匹配（比如不会把Ann-Paul当成Anne-Paul）
        $css_rules[] = sprintf('tr[class~="%s"] { background-color: green; }', esc_attr($class));
    }

    // 把生成的CSS输出到页面头部
    echo '<style type="text/css">' . implode('', $css_rules) . '</style>';
}

代码说明 #

• 这个函数会在页面加载时，自动提取当前页面中第一个带连字符类名的H2标签。
• 拆分H2的类名（比如Mary-Anne拆成Mary和Anne），然后生成对应的CSS规则。
• [class~="class-name"]是CSS属性选择器的精确匹配写法：它只会匹配class属性中包含独立的该类名的元素（比如<tr class="Mary other-class">会匹配，但<tr class="MaryAnn">不会），完美解决你担心的部分匹配问题。

备选方案：纯CSS（仅适用于固定类名组合） #

如果你的H2类名是固定的几个（比如只有Mary-Anne、Anne-Paul这几种），可以直接写静态CSS，不用PHP：

/* 当H2类是Mary-Anne时，高亮tr.Mary和tr.Anne */
h2.Mary-Anne + table tr[class~="Mary"],
h2.Mary-Anne + table tr[class~="Anne"] {
    background-color: green;
}

/* 当H2类是Anne-Paul时，高亮tr.Anne-Paul */
h2.Anne-Paul + table tr[class~="Anne-Paul"] {
    background-color: green;
}

把这段CSS添加到主题的「自定义CSS」面板里即可。注意这里用了+相邻兄弟选择器，要求表格必须紧跟在对应的H2标签后面才会生效。

注意事项 #

• 如果你的表格是用插件生成的，要确保表格行的class确实是取自Name列的类名（比如tr.Mary）。
• 用PHP方案时，建议用「Code Snippets」插件添加代码，比直接改functions.php更安全，不会因为主题更新丢失代码。

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