2013-10-24 35 views
5

我遇到了一塊CSS代碼:奇怪的反斜線和行爲在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中完全不同。

這個例子中反斜槓的用法是什麼?

+6

他們CSS黑客攻擊,目標和風格,CSS的特定瀏覽器的解釋;參考:[http://css-tricks.com/snippets/css/browser-specific-hacks/](http://css-tricks.com/snippets/css/browser-specific-hacks/)。 –

+2

這是@DavidThomas告訴的,但它也被用來逃避選擇器中使用的特殊字符http://reference.sitepoint.com/css/hacks –

+0

@fabregaszy我意識到這是一個老問題,但我的答案澄清你的疑問? –

回答

2

在這個實例中的斜線用於轉義字符。

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-colourredbody *具有同等特異性p但畢竟它被放置在樣式表
  • <div>This should have no background color</div>background-colourred,因爲它匹配規則,並且沒有其他人可以覆蓋此元素的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>