我正在尝试为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>
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标识符
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, '-');
}
这是我在这种情况下使用的一个函数（您可以删除处理德语元音变音符的行）。它将字符串中的所有非单词字符减少为一个连字符，并返回一个不带空格、点等的小写标识符。