xuyệc ngược Strange và hành vi trong CSS

Question

Tôi đã đi qua một đoạn mã CSS như thế này:

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>

Trong Firefox và Internet Explorer 10 kết quả được như mô tả trong HTML. Nhưng trong Chrome, nó hoàn toàn khác.

Việc sử dụng dấu gạch chéo ngược trong ví dụ này là gì?

Answer 1

Dấu gạch chéo trong trường hợp này được sử dụng để thoát khỏi ký tự.

body \2a là hiệu quả body * là \2a là phiên bản được mã hóa của *. W3C tuyên bố rằng (chữ đậm được thêm vào để rõ ràng):

Trong CSS, mã định danh (bao gồm tên phần tử, lớp và ID trong bộ chọn) chỉ có thể chứa ký tự [a-zA-Z0-9] và ISO 10646 ký tự U + 00A0 và cao hơn, cộng với dấu nối (-) và dấu gạch dưới (_); chúng không thể bắt đầu bằng một chữ số, hai dấu gạch ngang, hoặc dấu gạch ngang theo sau là một chữ số. Số nhận dạng cũng có thể chứa các ký tự thoát và bất kỳ ký tự ISO 10646 nào dưới dạng mã số (xem mục tiếp theo) .Ví dụ, số nhận dạng "B & W?" có thể được viết là "B \ & W \?" hoặc "B \ 26 W \ 3F".

Nhân vật và trường hợp (https://www.w3.org/TR/CSS2/syndata.html#characters)

Bảng dưới đây cho thấy 2a là mã hex cho *:

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

U+002A    *   2a    ASTERISK

mã UTF-8 bảng và Unicode charact ERS (http://www.utf8-chartable.de/)

\* và \p là một phương pháp thoát nhân vật như đã đề cập bởi W3C (đậm thêm cho rõ ràng):

Thứ hai, nó hủy bỏ ý nghĩa của nhân vật CSS đặc biệt. Bất kỳ ký tự nào (ngoại trừ số thập lục phân, dòng số, dấu xuống dòng hoặc biểu mẫu) có thể được thoát bằng dấu gạch chéo ngược để loại bỏ ý nghĩa đặc biệt của nó. Ví dụ, "\"" là một chuỗi gồm một dấu nháy kép. Preprocessors tờ Phong cách không phải loại bỏ những dấu xồ nguợc từ một style sheet từ đó sẽ thay đổi ý nghĩa style sheet của.

Nhân vật và trường hợp (https://www.w3.org/TR/CSS2/syndata.html#characters)

p không phải là chữ số thập lục phân (chúng là các số 0-9 và chữ AF) để nó xử lý \p làm quy tắc chuẩn.Nếu quy tắc là \a, nó sẽ bị bỏ qua dưới dạng một chữ số thập lục phân trong khi \s sẽ được vinh danh vì nó không phải là (xem \a và \s trong đoạn mã bên dưới).

Firefox chấp nhận ký tự thoát trong số nhận dạng lớp học (xem .B\26 W\3F trong đoạn mã bên dưới), nhưng dường như bỏ qua nó dưới dạng bộ chọn chung (*). Cả Chrome và Firefox đều bỏ qua các bộ chọn lân cận (+).

Đây là lý do tại sao trong Chrome nó đang gây ra:

• Các background-colour của <p>This should have a green background</p> là red như body * có độ đặc hiệu tương đương với p nhưng được đặt sau nó trong stylesheet
• Các background-colour của <div>This should have no background color</div> được red vì nó khớp với quy tắc và không có người nào khác ghi đè lên background-colour của phần tử này
• background-colour của html, body vv để được #bcc như quy tắc \* đang được phù hợp

Khó để nói đó là hành vi đúng, nó chỉ đơn giản sẽ xuất hiện mà spec đã được giải thích theo những cách hơi khác nhau.

Vì lý do các quy tắc này được sử dụng, giải thích khả thi duy nhất là tác giả đang cố gắng nhắm mục tiêu các trình duyệt cụ thể với các kiểu nhất định.

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>