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＆amp; W？”可以写成“B \＆amp; W \？”或“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提到的另一种转义字符的方法（为了清晰起见添加了粗体）：

其次，它取消了特殊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导致的原因：

background-colour <p>This should have a green background</p>为red body *与p具有相同的特异性，但在样式表中位于background-colour之后
<div>This should have no background color</div> red与background-colour匹配，因为它与规则匹配，没有其他人可以覆盖此元素的background-colour
html的{{1}}，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>

CSS中的奇怪反斜杠和行为

1 个答案: