我遇到了一段这样的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浏览器中则完全不同。
在此示例中，反斜杠的用法是什么？
在这种情况下，斜杠用于转义字符。
body \2abody *和\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和字母AF），因此将其视为\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，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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句