使用 md5 生成 CSS 样式的唯一 id

Question

我正在尝试为 div 生成一个唯一的 id，以便我可以在每个页面上相应地设置它的样式。一切似乎都很好，但我的 css 选择器无法识别 md5 id。对于这个特定页面，我正在处理生成的 id 是 749dd97038。所以我的问题是为什么 CSS 不使用 id，是因为 md5 的工作方式，它不会像这样工作吗？如果不是，那么使用 md5 有什么更好的解决方案？非常感谢。

我的 PHP 代码

<div id="sub-header" class="layout-<?php echo WpvTemplates::get_layout() ?> <?php if(!empty($page_header_bg) || !empty($global_page_header_bg)) echo 'has-background' ?>">
<div class="meta-header" id="<?php echo substr(md5($page_header_bg), 0, 10) ?>" style="<?php echo $page_header_bg ?>">
    <div class="limit-wrapper">
        <div class="meta-header-inside">
            <?php
                WpvTemplates::breadcrumbs();
                WpvTemplates::page_header(false, $title);
            ?>
        </div>
    </div>
</div>

我的 CSS 代码

#749dd97038.meta-header {
    background-size: cover !important;
    background-position: 50% calc(50% - 250px) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    height: 321px !important;
}

HTML 看起来像这样

    <div class="meta-header" id="749dd97038" style="background-image:url('http://wabi-sabi-opal-philosophy.jpg');background-repeat:no-repeat;">
    <div class="limit-wrapper">
        <div class="meta-header-inside">
            <header class="page-header ">
            <div class="page-header-content">
                <h1 style="">
                <span class="title">Family Therapy+Support</span>
                </h1>
            </div>
        </header>           
        </div>
    </div>
</div>

Answer 1

引用自 CSS 文档（由我突出显示）：

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)； 它们不能以数字开头、两个连字符或一个连字符后跟一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

来源：http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

MD5 显然不是标识符的好选择（它使阅读和维护代码成为一项可怕的练习）。我假设您的变量 $page_header_bg 包含不需要的字符，例如空格，所以我会编写一个函数来清理它：

function createSlug($name) {
    $name = strtolower($name);
    $name = str_replace(array('ä','ö','ü','ß'), array('ae','oe','ue','ss'), $name);
    $name = preg_replace("/([\W]+)/", "-", $name);
    return trim($name, '-');
}

这是我用于此类情况的功能（您可以删除处理德语变音符号的行）。它将字符串中的所有非单词字符减少为单个连字符，并返回一个小写标识符，没有空格、点等。