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＆amp; W？”可以写成“B \＆amp; 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, '-');
}

这是我用于这种情况的函数（你可以删除处理德语变音符号的行）。它将字符串中的所有非单词字符缩减为单个连字符，并返回不带空格，点等的小写标识符。

使用md5为CSS样式生成唯一ID

1 个答案: