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中完全不同。

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

- fabregaszy

---

这些是CSS hack，用于针对并样式化特定浏览器对CSS的解释。参考链接：http://css-tricks.com/snippets/css/browser-specific-hacks/。 - David Thomas

这是@DavidThomas所说的，但它也用于转义选择器中使用的特殊字符http://reference.sitepoint.com/css/hacks - Mr. Alien

@fabregaszy 我知道这是一个老问题，但我的回答是否解决了你的疑问？ - Hidden Hobbes

@HiddenHobbes 当然有用！非常感谢。 - fabregaszy

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将被执行，因为它不是（请参见下面代码片段中的\a和\s）。

Firefox接受类标识符中的转义字符（请参见下面代码片段中的.B\26 W\3F），但似乎将其忽略为通用选择器（*），这就是为什么样式没有应用的原因。 Chrome和Firefox都忽略转义相邻选择器（+）。

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

• 将 <p>This should have a green background</p> 的 background-colour 设为 red，因为 body * 的特殊性与 p 相同，但是在样式表中出现在它之后。
• 将 <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>

- Hidden Hobbes