如何使用 css 定位 id="last_name[]_field"

Question

我正在使用 wordpress 插件，开发人员使用名称中的 [] 字符创建了 ID。

我不知道如何用 css...

来定位他们

<p id="shipping_city[]_field">stuff</p>

所以我试试

#shipping_city[]_field {font-size:24px;}

之类的.. 运气不好。

有没有人运行以前参与过这种类型的事情？

我不想更改开发人员 html 因为这是一个表单条目，我认为 [] 有一个目的...

Answer 1

您必须转义特殊字符 - 请参阅 Link

The following characters have a special meaning in CSS: !, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, and ~.

There are two options if you want to use them. Either you use the Unicode code point — for example, the plus sign (+) is U+002B, so if you would want to use it in a CSS selector, you would escape it into b (note the space character at the end) or [=12=]002b (using exactly six hexadecimal digits).

The second option is far more elegant though: just escape the character using a backslash

#shipping_city\[\]_field {
  font-size: 24px;
  color: red;
}

<p id="shipping_city[]_field">stuff</p>

Answer 2

您可以使用反斜杠转义 css 中的字符

#shipping_city\[\]_field {font-size:24px;}

但实际上开发人员应该尽可能更改 id 选择器，以使代码更清晰。

如何使用 css 定位 id="last_name[]_field"

How can I target an id="last_name[]_field" with css

html

css

special-characters

css-selectors