在 CSS id 声明中使用 #答案

【问题标题】：Using the # inside a CSS id declaration在 CSS id 声明中使用 #
【发布时间】：2012-02-14 04:41:48
【问题描述】：

通常我只会在任何 html 类或 id 属性中使用带有 - 和 _ 的字母数字，但我想知道它是否可能在属性中间包含一个 #，例如：

<div id = "my_css_id_#f4ed11">

我不会通过 CSS 来定位这个，这纯粹是为了 javasrcipt。

注意我问它的原因不是因为我想这样做，而是因为有人完成了一些相关的 PHP 代码，这将使这部分成为项目的一部分更容易。

谢谢

【问题讨论】：

标签： javascript css css-selectors

【解决方案1】：

当然可以。根据 HTML5 是有效的。

您只需要escape the character in a selector (for use in CSS or JavaScript)。对于# 字符，很简单；你可以使用\#。

这里有一个工具可以告诉你如何转义 CSS/JS 选择器中的任何字符：http://mothereff.in/css-escapes#0foo%23bar 来自该页面：

<script>
  // document.getElementById or similar
  document.getElementById('foo#bar');
  // document.querySelector or similar
  $('#foo\\#bar');
</script>

附：关于 ID 或 class 值中的奇怪字符：http://mathiasbynens.be/notes/html5-id-class

【讨论】：

【解决方案2】：

我不建议这样做。正如您所指出的，通过 CSS 甚至 Javascript 访问 ID 为 #...#... 的元素会很困难，因为 # 在编程/编码中如此重载。

听起来您想存储一些数据。您知道 W3C 标准允许以data- 开头的属性吗？

例如，您可以保留与元素相关联的一段数据：

<p data-name="John Jones">I like alliteration.</p>

本文有效地详细介绍了数据属性。 http://ejohn.org/blog/html-5-data-attributes/

【讨论】：

【解决方案3】：

最好进行反复试验，看看它是否有效。但是，就伪选择器而言，使用 # 符号应该没有问题。要选择您将使用：

$("#my_css_id_#f4ed11")

【讨论】：

这个答案不正确。您提议的选择器将尝试选择同时具有 id="my_css_id_" 和 id="f4ed11" 的元素，这在 HTML 中是不可能的。（假设 $ 是 jQuery，或者任何其他使用 document.querySelectorAll 的 JavaScript 库（如果可用）。不过，document.getElementById('my_css_id_#f4ed11') 也可以。）