CSS中奇怪的反斜杠和行为 [英] Strange backslash and behavior in CSS

问题描述

我遇到了一段CSS代码，如下所示:

I've come across a piece of CSS code like this:

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浏览器中则完全不同.

In Firefox and Internet Explorer 10 the result is as described in the HTML. But in Chrome it's totally different.

在此示例中，反斜杠的用法是什么?

What is the usage of the backslashes in this example?

推荐答案

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

body \ 2a 实际上是 body * ，因为 \ 2a 是 * 的编码版本.W3C指出(为清楚起见，添加了粗体):

body \2a is effectively body * as \2a is the encoded version of *. W3C states that (bold added for clarity):

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item).For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

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

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

The following table shows that 2a is the hex code for *:

Unicode code point   character   UTF-8 (hex.)    name

U+002A               *           2a              ASTERISK

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

\ * 和 \ p 是W3C提到的另一种转义字符的方法(为清晰起见，添加了粗体):

\* and \p is another method of escaping characters as mentioned by W3C (bold added for clarity):

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

Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning.

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

p不是十六进制数字(它们是数字0-9和字母A-F)，因此它将 \ p 视为标准规则.如果规则是 \ a ，则它将被忽略，因为a是十六进制数字，而 \ s 则会被接受，因为不是这样(请参见 \ a >和下面的代码段中的 \ s .

p is not a hexadecimal digit (they are the numbers 0-9 and the letters A-F) so it treats \p as a standard rule. If the rule were \a it would be ignored as a is a hexadecimal digit while \s would be honoured as it is not (see \a and \s in the snippet below).

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

Firefox accepts escaped characters in class identifiers (see .B\26 W\3F in the snippet below), but seems to ignore it as a universal selector (*) which is why the styles are not being applied. Both Chrome and Firefox ignore escaped adjacent selectors (+).

这就是在Chrome中导致的原因:

This is why in Chrome it is causing:

• < p>的背景色应具有绿色背景</p> ，将其作为红色作为正文* 与 p 具有相同的特异性，但在样式表中排在其后
• < div>的 background-colour ，它应该没有背景色</div> 是 red ，因为它与规则，没有其他人可以覆盖此元素的 background-colour
• html ， body 等的背景色为 #bcc 作为 \* 规则被匹配

• The background-colour of <p>This should have a green background</p> to be red as body * has equal specificity to p but is placed after it in the stylesheet
• The background-colour of <div>This should have no background color</div> to be red as it matches the rule and there are no others to override the background-colour of this element
• The background-colour of html, body etc to be #bcc as the \* rule is being matched

很难说出哪种是正确的行为，似乎只是在以不同的方式解释了该规范.

Difficult to say which is the correct behaviour, it would simply appear that the spec has been interpreted in slightly different ways.

关于为什么使用这些规则，唯一可行的解​​释是作者试图针对具有特定样式的特定浏览器.

As to why these rules are used, the only feasible explanation would be that the author is trying to target specific browsers with certain styles.

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中奇怪的反斜杠和行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！