Селектор CSS для id, начинающийся с hash (#)

В настоящее время я изучаю css и html, и я столкнулся с проблемой, о которой я никогда не думал, я должен выбрать идентификатор, который имеет следующий идентификатор:

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

Каждый раз, когда я пытаюсь выбрать этот идентификатор на моей странице стилей CSS, всегда возникает проблема:

##Test {
    color: red;
}

Я не могу заставить свойства работать, я не знаю, как их выбрать, я бы хотел, чтобы кто-нибудь помог мне решить эту проблему, спасибо заранее!

Ответ 1

CSS поддерживает экранирование

#\#Test {
    color: red;
}

Попробуйте это. Здесь один # экранирован, чтобы указать, что он является частью значения id

Ответ 2

Вы можете использовать селектор [att=val].

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

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

Ответ 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>

Ответ 4

Вы можете использовать Селектора атрибутов и более конкретно:

[атр = значение]

Представляет элемент с именем атрибута attr и значение которого имеет префикс "значение".

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

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