Php 使用md5为CSS样式生成唯一id

我正在尝试为一个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>

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>

家庭治疗+支持

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

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

资料来源：

对于标识符，MD5显然不是一个好的选择（它使读取和维护代码成为一个可怕的练习）。我假设您的变量

$page\u header\u 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, '-');
}

---

这是我在这种情况下使用的函数（您可以删除处理德语umlauts的行）。它将一个字符串中的所有非单词字符简化为一个连字符，并返回一个不带空格、圆点等的小写标识符。

很抱歉花了这么长时间才做出响应，我不得不去睡觉，你的css我觉得我应该知道，我只是在md5前面添加了一个前缀，现在它就可以工作了，我还是想找到你的路。我只是不确定它是如何工作的，我可以把这个函数放在我的php标签中，然后把$name改成$page\u header\u bg？抱歉，对php不熟悉。您只需调用它，而不是调用您的

substr（md5（））

：

（当然还要使用.css文件中的结果），当我使用您的函数时，它会使id=“background-image-url-http-www-mywebsite-com-clients-opal-wp-content-uploads-2011-10-12-jpg-background-repeat-no-repeat”，因此，它返回我试图设置样式的图像的位置和该图像的内联样式，有没有办法使id成为更小的字符串？通过添加前缀，如“a”，css现在可以识别它，允许我设置样式。因此，对于那些可能遇到相同问题的人，这为我解决了它

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