5

我遇到过这样的一段 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 中则完全不同。

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

4

1 回答 1

2

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

body \2a与 的编码版本body *一样有效。W3C 声明（为清楚起见添加了粗体）：\2a*

在 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 和字母 AF），因此它被视为\p标准规则。如果规则是\a，它将被忽略，因为 a 是十六进制数字，而\s将被尊重，因为它不是（参见下面的代码段中的\a和\s）。

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

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

  • 的to be as具有相同background-colour的特异性，但在样式表中放在它之后<p>This should have a green background</p>redbody *p
  • 的background-colourof<div>This should have no background color</div>与red规则匹配，并且没有其他人可以覆盖background-colour此元素的
  • background-colourofhtml等作为规则body被匹配#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>

于 2016-02-11T12:26:13.843 回答