如何将PHP变量作为HTML元素ID并让对应CSS样式生效

问题原因 #

• ID值存在多余空格
  你编写的HTML代码中，PHP输出ID的语句和ID属性的结束引号之间多了一个空格：

  <div class = 'rowcontainer' id = "<?php echo $studentid; ?> "></div>
  

  这个空格会被直接带入元素的ID值，实际元素ID为2 （末尾带空格），和CSS中定义的#2无法匹配，先删除这个空格即可解决匹配问题：

  <div class="rowcontainer" id="<?php echo $studentid; ?>"></div>
  

• 纯数字ID不符合CSS选择器规范
  虽然HTML5允许ID属性为纯数字，但CSS规范中ID选择器属于标识符，不能直接以数字开头，即使你删掉空格，直接写#2也无法正常匹配元素。

解决方案 #

方案1：转义纯数字ID（不推荐） #

如果必须保留纯数字ID，可以将CSS中的选择器做转义处理，数字2的ASCII十六进制编码为32，写法如下：

#\32 {
  background-color: blue;
}

方案2：给ID增加语义化前缀（推荐） #

给动态生成的ID加上固定前缀，既符合CSS规范，也能避免和页面其他ID冲突，修改方式如下：
PHP侧修改ID生成逻辑：

$studentid = 'student-' . $row['id'];

CSS侧对应修改选择器即可：

#student-2 {
  background-color: blue;
}

更优的实现方式 #

如果这个数值只是用来标识学生ID，不需要作为锚点或者全局唯一标识使用，更推荐存到自定义data-*属性中，完全规避ID命名限制：

<div class="rowcontainer" data-student-id="<?php echo $row['id']; ?>"></div>

匹配对应元素可以用CSS属性选择器：

.rowcontainer[data-student-id="2"] {
  background-color: blue;
}

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