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 声明（为清楚起见添加了粗体）：

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)；它们不能以数字、两个连字符或一个连字符后跟一个数字开头。 标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

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

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

Unicode 代码点字符 UTF-8（十六进制）名称

U+002A * 2a 星号

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

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

第二，它取消了特殊CSS字符的含义。 任何字符（十六进制数字、换行、回车或换页除外）都可以用反斜杠转义以消除其特殊含义。例如，“\”是由一个双精度字符组成的字符串引用。样式表预处理器不得从样式表中删除这些反斜杠，因为这会改变样式表的含义。

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

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

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

这就是为什么在 Chrome 中导致：

• <p>This should have a green background</p> 的 background-colour 与 red 相同，与 body * 具有相同的特异性，但在样式表中放在它之后
• <div>This should have no background color</div> 的 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>