css - CSS 中奇怪的反斜杠和行为

Question

我遇到过这样一段 CSS 代码:

p {
  color: white;
}
\p {
  background: green;
}
\* {
  background: #bcc;
}
body \2a {
  background: red;
}
.recover {
  background: #6ea;
  color: black;
}
div {
  border: 2px solid blue;
}
ul,
li,
a {
  background: none;
}

<p>This should have a green background</p>
<div>This should have no background color</div>
<p class="recover">CSS has recovered</p>

在 Firefox 和 Internet Explorer 10 中，结果如 HTML 中所述。但在 Chrome 中完全不同。

这个例子中反斜杠的用法是什么？

Answer 1

此实例中的斜杠用于转义字符。

body\2a 实际上是 body * 因为 \2a 是 * 的编码版本。 W3C 声明(为清楚起见添加了粗体):

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

字符和大小写 ( https://www.w3.org/TR/CSS2/syndata.html#characters )

下表显示2a是*的十六进制代码:

Unicode code point   character   UTF-8 (hex.)    name

U+002A               *           2a              ASTERISK

UTF-8 编码表和 Unicode 字符 ( http://www.utf8-chartable.de/ )

\* 和 \p 是 W3C 提到的另一种转义字符的方法(为清楚起见添加了粗体):

Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.

字符和大小写 ( https://www.w3.org/TR/CSS2/syndata.html#characters )

p 不是十六进制数字(它们是数字 0-9 和字母 A-F)，因此它将 \p 视为标准规则。如果规则是 \a 它将被忽略，因为 a 是十六进制数字，而 \s 将被尊重，因为它不是(参见 \a 和下面代码段中的 \s)。

Firefox 接受类标识符中的转义字符(请参阅下面代码段中的 .B\26 W\3F)，但似乎忽略它作为通用选择器(* ) 这就是未应用样式的原因。 Chrome 和 Firefox 都会忽略转义的相邻选择器 (+)。

这就是为什么在 Chrome 中它会导致:

• This should have a green background

  的 background-colour 为 red 作为 body * 与 p 具有相同的特异性，但在样式表中放在它之后
• This should have no background color
  的 background-colour 为 red 因为它符合规则并且没有其他人可以覆盖此元素的 background-colour
• html、body等的background-colour为#bcc作为\* 正在匹配规则

很难说哪种行为是正确的，只是看起来规范的解释方式略有不同。

至于为什么使用这些规则，唯一可行的解​​释是作者试图以特定样式针对特定浏览器。

p {
  color: white;
}
\p {
  background: green;
}
\* {
  background: #bcc;
}
body \2a {
  background: red;
}
.recover {
  background: #6ea;
  color: black;
}
.recover:after {
  content: '\2a';
  display: block;
}
div {
  border: 2px solid blue;
}
.B\26 W\3F {
  background: black;
  color: white;
}
.B\26 W\3F \2b div {
  background: purple;
  color: white;
}
\a {
  border: 2px solid blue;
}
\s {
  border: 2px solid blue;
}

<p>This should have a green background</p>
<div>This should have no background color</div>
<p class="recover">CSS has recovered</p>
<p class="B&W?">Encoded test</p>
<div>Encoded adjacent test</div>
<a href="#">Hexadecimal digit</a>
<s>Non hexadecimal digit</s>