Die Schrägstriche in dieser Instanz werden zum Maskieren von Zeichen verwendet.
body \2a ist effektiv body * als \2a die Version von * codiert ist. W3C stellt fest, dass (fett für Klarheit hinzugefügt):
In CSS-IDs (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen enthalten [a-zA-Z0-9] und ISO 10646 Zeichen U + 00A0 und höher, plus Bindestrich (-) und Unterstrich (_); Sie können nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich beginnen, gefolgt von einer Ziffer. Bezeichner können auch maskierte Zeichen und jedes ISO 10646-Zeichen als numerischen Code enthalten (siehe nächster Punkt). Zum Beispiel die Kennung "B & W?" kann geschrieben werden als "B \ & W \?" oder "B \ 26 W \ 3F".
Characters und Fall (https://www.w3.org/TR/CSS2/syndata.html#characters)
Die folgende Tabelle zeigt, dass 2a der Code hex für *:
Unicode code point character UTF-8 (hex.) name
U+002A * 2a ASTERISK
UTF-8-Codierung Tabelle und Unicode-Zeichen ers (http://www.utf8-chartable.de/)
\* und \p ist eine weitere Methode Zeichen zu entkommen, wie durch W3C (fett hinzugefügt für Klarheit) erwähnt:
Zweitens ist es, die Bedeutung von speziellen CSS-Zeichen löscht. Jedes Zeichen (außer einer hexadezimalen Ziffer, Zeilenvorschub, Wagenrücklauf oder Seitenvorschub) kann mit einem Backslash versehen werden, um seine spezielle Bedeutung zu entfernen. Zum Beispiel: „\““ist eine Zeichenfolge aus einem doppelten Anführungszeichen besteht. Stylesheet Preprozessoren dürfen diese Schrägstriche aus einem Stylesheet entfernen, da dies die Bedeutung des Stylesheet ändern würde.
Charaktere und Fall (https://www.w3.org/TR/CSS2/syndata.html#characters)
p ist keine hexadezimale Ziffer (das sind die Zahlen 0-9 und die Buchstaben AF), daher behandelt es \p als Standardregel.Wenn die Regel \a wäre, würde sie ignoriert, da a eine hexadezimale Ziffer ist, während \s geehrt werden würde, wie es nicht ist (siehe \a und \s im Schnipsel unten).
Firefox akzeptiert maskierte Zeichen in Klassenbezeichnern (siehe unten im Snippet unter .B\26 W\3F), scheint sie jedoch als universellen Selektor zu ignorieren (*), weshalb die Stile nicht angewendet werden. Sowohl Chrome als auch Firefox ignorieren angrenzende Selektoren (+).
Aus diesem Grund ist in Chrome es verursacht:
- Die
background-colour von <p>This should have a green background</p> zu sein red als body * gleich Spezifität p hat, aber nachdem es im Stylesheet platziert
- Die
background-colour von <div>This should have no background color</div> zu sein red wie es die Regel entspricht und es gibt keine anderen zu überschreiben background-colour dieses Elements
- Die
background-colour von html, body usw. zu sein #bcc wie die \* Regel angepasst wird ist
Schwer zu sagen, welches das richtige Verhalten ist, wäre es einfach scheint, dass der spec auf leicht unterschiedliche Weise interpretiert wurde.
Warum diese Regeln verwendet werden, ist die einzige mögliche Erklärung, dass der Autor versucht, bestimmte Browser mit bestimmten Stilen zu zielen.
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>
Sie sind CSS-Hacks, Ziel und Stil, eine Interpretation des CSS des bestimmten Browser; Referenz: [http://css-tricks.com/snippets/css/browser-specific-hacks/](http://css-tricks.com/snippets/css/browser-specific-hacks/). –
Es ist, was @DavidThomas erzählt, aber es wird auch verwendet, um die Sonderzeichen zu entkommen, die in den Selektoren verwendet werden http://reference.sitepoint.com/css/hacks –
@fabregaszy Ich realisiere, dass dies eine alte Frage ist, aber hat meine Antwort geklärt Ihre Fragen? –