如何在带有主题标签的 CSS 和 jQuery 选择器中使用“#”？

在带有主题标签的 CSS 和 jQuery 选择器中使用“#”

问题

考虑以下 HTML：

<code class="html"><div id='test#1'>test1</div>
<div id='test#2'>test2</div></code>

以下代码片段将无法按预期工作：

<code class="css">#test#1 {
  color: red;
}</code>

<code class="jQuery">$('#test#2').css('color', 'blue');</code>

解决方案

要使用“#”等元字符作为名称的文字部分，必须对它们进行转义带反斜杠：

<code class="css">#test\#1 {
  color: red;
}</code>

<code class="jQuery">$('#test\#2').css('color', 'blue');</code>

建议

为了保持一致性并遵循网络标准，最好避免在 ID 中使用“#”。 ID 必须以字母开头，并且只能包含字母、数字、连字符、下划线、冒号和句点。

转义“.”在 ID 中

如果 ID 包含“.”，您还应该转义它：

<code class="html"><div id='test.1'></div></code>

<code class="css">#test\.1 {
  color: red;
}</code>

<code class="jQuery">$('#test\.1').css('color', 'blue');</code>

以上是如何在带有主题标签的 CSS 和 jQuery 选择器中使用“#”？的详细内容。更多信息请关注PHP中文网其他相关文章！