用hash开头的id的CSS选择器(#)

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]选择器.

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

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

[att = val]表示具有att属性的元素,其值正好为"val".

Rerefence:属性存在和值选择器

Answer 3

您仍然可以通过转义语法字符来使用ID选择器,如下所示:

#\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码点值.上述三种变体的工作原理如下:

1. 非十六进制字符(T在本例中为)表示转义序列的结束.
2. 空格表示转义序列的结束.
3. 使用恰好6个十六进制数字.