Question

我正在学习css和html，我遇到了一个我从未想过的问题，我必须选择一个ID如下ID：

<header id="#Test">Testing Test</header>

每当我尝试在我的css样式表上选择此ID时，似乎总会出现问题：

##Test {
    color: red;
}

我无法让这些属性工作，我不知道如何选择它，我很乐意，如果有人会帮助我解决这个问题，请提前感谢！

Answer 1

CSS支持转义

#\#Test {
    color: red;
}

试试这个。这里有一个#被转义，表明它是id

值的一部分

Answer 2

您可以使用[att=val]选择器。

＆＃13;

header[id="#Test"] {
    color: red;
}

＆＃13;

<header id="#Test">Testing Test</header>

＆＃13;

[att = val]表示具有att属性值的元素确切地说＆＃34; val＆＃34;。

Rerefence：Attribute presence and value selectors

Answer 3

您仍然可以使用ID选择器by escaping the syntax characters，如下所示：

#\23Test1 {
  color: #F00;
}
#\23 Test2 {
  color: #080;
}
#\000023Test3 {
  color: #00F;
}

<header id="#Test1">Testing Test</header>
<header id="#Test2">Testing Test</header>
<header id="#Test3">Testing Test</header>

以上示例中的23是# unicode代码点值的十六进制表示。上述三种变体的工作原理如下：

非十六进制字符（本例中为T）表示转义序列的结束。
空格表示转义序列的结束。
使用了正好6个十六进制数字。

Answer 4

您可以使用Attribute selectors以及更具体的内容：

[ATTR ^ =值]

表示属性名称为attr且其值的元素   以＆＃34;值＆＃34;为前缀。

＆＃13;

div[id^='#'] {
  background: red;
}
div {
  width: 200px;
  height: 100px;
  border: solid 1px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

＆＃13;

<div id="#Test">With ID starts with #</div>
<div id="Test">ID doesn't start with #</div>

＆＃13;

这种方式会从id开始选择#的所有元素。

用hash开头的id的CSS选择器（＃）

4 个答案: