在這個實例中的斜線用於轉義字符。
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 code point character UTF-8 (hex.) name
U+002A * 2a ASTERISK
UTF-8編碼表和Unicode字符ERS(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
)。
火狐接受逃脫類標識符(見下面的代碼片段.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
- 的
background-colour
0,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黑客攻擊,目標和風格,CSS的特定瀏覽器的解釋;參考:[http://css-tricks.com/snippets/css/browser-specific-hacks/](http://css-tricks.com/snippets/css/browser-specific-hacks/)。 –
這是@DavidThomas告訴的,但它也被用來逃避選擇器中使用的特殊字符http://reference.sitepoint.com/css/hacks –
@fabregaszy我意識到這是一個老問題,但我的答案澄清你的疑問? –