Điều đó có nghĩa là gì khi quy tắc CSS được tô xám trong trình kiểm tra phần tử của Chrome?
Câu trả lời:
Đối với tôi, các câu trả lời hiện tại không giải thích được vấn đề đầy đủ, vì vậy tôi đang thêm câu trả lời này với hy vọng có thể hữu ích cho người khác.
Văn bản bị mờ / mờ đi, có thể có nghĩa là
- đó là một quy tắc / thuộc tính mặc định mà trình duyệt áp dụng, bao gồm các thuộc tính tay ngắn mặc định.
- Nó liên quan đến thừa kế phức tạp hơn một chút.
Di sản
Lưu ý: Bảng "kiểu" của công cụ phát triển Chrome sẽ hiển thị một bộ quy tắc, bởi vì một hoặc nhiều quy tắc từ bộ đang được áp dụng cho nút DOM hiện được chọn. Tôi đoán, để hoàn thiện, các công cụ dev hiển thị tất cả các quy tắc từ tập hợp đó, cho dù chúng có được áp dụng hay không.
Trong trường hợp quy tắc được áp dụng cho phần tử hiện được chọn do kế thừa (nghĩa là quy tắc được áp dụng cho tổ tiên và phần tử được chọn kế thừa nó), chrome sẽ hiển thị lại toàn bộ quy tắc.
Các quy tắc được áp dụng cho phần tử hiện được chọn xuất hiện trong văn bản bình thường.
Nếu một quy tắc tồn tại trong tập hợp đó nhưng không được áp dụng vì đó là thuộc tính không kế thừa (ví dụ: màu nền), nó sẽ xuất hiện dưới dạng văn bản màu xám / mờ.
đây là một bài viết đưa ra một lời giải thích tốt - (Lưu ý: mục có liên quan nằm ở cuối bài viết - hình 21 - thật không may là phần có liên quan không có tiêu đề) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033
Trích từ bài báo
[Kịch bản kế thừa] này đôi khi có thể tạo ra một chút nhầm lẫn, bởi vì các thuộc tính tay ngắn mặc định; Hình 21 minh họa các thuộc tính tay ngắn mặc định của thuộc tính phông chữ cùng với các thuộc tính không được kế thừa. Chỉ cần lưu ý đến bối cảnh mà bạn đang xem xét khi kiểm tra các yếu tố.
Điều đó có nghĩa là quy tắc đã được kế thừa, nhưng không áp dụng cho thành phần được chọn:
http://code.google.com.vn/chrom/devtools/docs/elements-styles.html#computing_style
Khung chỉ chứa các thuộc tính từ các quy tắc được áp dụng trực tiếp cho phần tử được chọn. Để hiển thị bổ sung các thuộc tính được kế thừa, hãy bật hộp kiểm Hiển thị được kế thừa. Các thuộc tính như vậy sẽ được hiển thị trong một phông chữ mờ.
Ví dụ trực tiếp: kiểm tra phần tử chứa văn bản "Xin chào, thế giới!"
div {
margin: 0;
}
div#foo {
margin-top: 10px;
}<div id="foo">Hello, world!</div>Michael Coleman có câu trả lời đúng. Tôi chỉ muốn thêm một hình ảnh đơn giản để đi cùng với nó. Liên kết mà anh ấy đưa vào có ví dụ đơn giản này: http://commandlinefanatic.com/art033ex4.html
HTML / DOM trông như thế này ...
Ngăn Kiểu trong Chrome trông như thế này khi bạn chọn phần tử p ...
Như bạn có thể thấy, phần tử p kế thừa từ tổ tiên của nó (divs). Vậy tại sao phong cách lại background-color: bluexám xịt? Bởi vì đó là một phần của bộ quy tắc có ít nhất một kiểu có thể kế thừa. Phong cách kế thừa đó làtext-indent: 1em
background-color:bluekhông phải là kế thừa nhưng nó là một phần của bộ quy tắc chứa text-indent: 1emcái không thể chấp nhận được và các nhà phát triển của Chrome muốn hoàn thành khi hiển thị các bộ quy tắc. Tuy nhiên, để phân biệt giữa các kiểu trong bộ quy tắc có thể kế thừa từ các kiểu không có, các kiểu không thể sử dụng được chuyển sang màu xám.
divs và p. Bạn sẽ thấy đó background-colorkhông phải là màu xám cho div#two. Nhưng background-colorlà màu xám cho div#threevà p.
Điều này cũng xảy ra nếu bạn thêm một kiểu thông qua trình kiểm tra, nhưng kiểu mới đó không áp dụng cho phần tử bạn đã chọn. Thông thường các kiểu được hiển thị chỉ là các kiểu cho phần tử được chọn, vì vậy màu xám biểu thị rằng kiểu bạn vừa thêm không chọn phần tử có tiêu điểm trong trình điều hướng DOM.
Nó có nghĩa là quy tắc đã được thay thế bằng quy tắc khác với mức độ ưu tiên cao hơn. Ví dụ: bảng định kiểu có:
h2 {
color: red;
}
h2 {
color: blue;
}Thanh tra sẽ hiển thị các quy tắc color:red;màu xám và color:blue;bình thường.
Đọc về kế thừa CSS để tìm hiểu quy tắc nào được kế thừa / có mức độ ưu tiên cao hơn.
BIÊN TẬP:
Mixup: quy tắc chuyển sang màu xám là quy tắc bỏ đặt, sử dụng biểu định kiểu mặc định đặc biệt được áp dụng cho tất cả các phần tử (quy tắc làm cho phần tử có thể hiển thị được, bởi vì tất cả các kiểu phải có giá trị).
font-size: 20px;:)
Khi sử dụng webpack, mọi quy tắc hoặc thuộc tính css đã được thay đổi trong mã nguồn sẽ chuyển sang màu xám khi trang tải lại sau khi xây dựng lại. Điều này thực sự gây phiền nhiễu và buộc tôi phải tải lại trang mỗi lần.
Tôi đang trả lời rất lâu sau khi câu hỏi đã có nhiều câu trả lời đúng vì tôi gặp phải một trường hợp khác là có một khối mã CSS bị mờ đi và không thể chỉnh sửa được trong Chome DevTools: Khối trong câu hỏi chứa các ký tự U + 200B ZERO WIDTH SPACE . Khi tôi tìm thấy chúng và xóa chúng, tôi có thể chỉnh sửa khối trong Chrome DevTools một lần nữa. Có lẽ điều này cũng có thể xảy ra với các nhân vật không phải là ascii khác, tôi đã không cố gắng tìm ra điều đó.