Kiểu phần tử là gì và tại sao nó ghi đè cài đặt css của tôi?

Hướng dẫn này giả định rằng bạn đã quen với việc kiểm tra CSS trong Chrome DevTools. Xem Xem và thay đổi CSS để tìm hiểu kiến ​​thức cơ bản

# Kiểm tra CSS mà bạn là tác giả

Giả sử rằng bạn đã thêm một số CSS vào một phần tử và muốn đảm bảo rằng các kiểu mới được áp dụng đúng cách. Khi bạn làm mới trang, phần tử trông giống như trước đây. Có cái gì đó không đúng

Điều đầu tiên cần làm là kiểm tra phần tử và đảm bảo rằng CSS mới của bạn thực sự được áp dụng cho phần tử

Đôi khi, bạn sẽ thấy CSS mới của mình trong ngăn Thành phần > Kiểu nhưng CSS mới của bạn ở dạng văn bản nhạt , không thể chỉnh sửa .

# Hiểu CSS trong ngăn Kiểu

Ngăn Kiểu nhận ra nhiều loại sự cố CSS và làm nổi bật chúng theo những cách khác nhau

# Không hợp lệ

Ngăn Kiểu gạch bỏ các thuộc tính có cú pháp không hợp lệ và hiển thị biểu tượng cảnh báo

# bị ghi đè

Ngăn Kiểu gạch bỏ các thuộc tính bị các thuộc tính khác ghi đè theo thứ tự Xếp tầng

Trong ví dụ này, thuộc tính kiểu width: 300px; trên phần tử ghi đè width: 100% trên lớp .youtube

# Không hoạt động

Ngăn Kiểu hiển thị trong văn bản nhạt và đặt biểu tượng thông tin

Các thuộc tính nhạt này không hoạt động do logic CSS, không phải thứ tự Xếp tầng

Gotchas

• Đặc tính nhạt không di truyền khác với đặc tính nhạt không di truyền. Thuộc tính không hoạt động có biểu tượng

• Di chuột qua biểu tượng để xem gợi ý về lỗi.

Trong ví dụ này, thuộc tính display: block; vô hiệu hóa justify-content và align-items kiểm soát bố cục flex hoặc lưới

# Thừa kế và không thừa kế

Ngăn Kiểu liệt kê các thuộc tính trong phần Inherited from tùy thuộc vào kế thừa mặc định của chúng

• Được kế thừa theo mặc định trong văn bản thông thường
• Không được kế thừa theo mặc định nằm trong văn bản nhạt .

Gotchas

• Đặc tính nhạt không di truyền khác với đặc tính nhạt không di truyền. Thuộc tính không kế thừa không có biểu tượng và nằm trong phần tương ứng
• Ghi đè tính kế thừa mặc định không ảnh hưởng đến cách ngăn Kiểu hiển thị các thuộc tính. nhợt nhạt hay không

# tốc ký

Các thuộc tính tốc ký (ngắn gọn) cho phép bạn đặt nhiều thuộc tính CSS cùng một lúc và có thể làm cho biểu định kiểu của bạn dễ đọc hơn. Tuy nhiên, do tính chất ngắn gọn của các thuộc tính đó, bạn có thể bỏ lỡ một thuộc tính tốc ký (chính xác) sẽ ghi đè một thuộc tính được ngụ ý bởi tốc ký

Ngăn Kiểu hiển thị các thuộc tính tốc ký dưới dạng

Trong ví dụ này, hai trong số bốn thuộc tính rút gọn thực sự bị ghi đè

# Không thể chỉnh sửa

Ngăn Kiểu hiển thị các thuộc tính không thể chỉnh sửa bằng văn bản in nghiêng. Ví dụ: không thể chỉnh sửa CSS từ các nguồn sau

• user agent stylesheet—Biểu định kiểu mặc định của Chrome

  

• Các thuộc tính HTML liên quan đến kiểu dáng trên phần tử, ví dụ: chiều cao, chiều rộng, màu sắc, v.v. Bạn có thể chỉnh sửa chúng trong cây DOM và điều này cập nhật CSS trong ngăn Kiểu chứ không phải ngược lại

  Trong ví dụ này, thuộc tính height="48" trên phần tử được đặt thành width: 100%0. Thao tác này cập nhật thuộc tính tương ứng bên dưới width: 100%1 trong ngăn Kiểu

# Kiểm tra một phần tử vẫn chưa được tạo kiểu theo cách bạn nghĩ

Để biết gợi ý về sự cố, hãy mở ngăn Tính toán để xem CSS "cuối cùng" được áp dụng cho một thành phần và so sánh với CSS bạn đã khai báo

Khung Thành phần > Kiểu hiển thị tập hợp chính xác các quy tắc CSS khi chúng được viết trong các biểu định kiểu khác nhau. Mặt khác, khung Phần tử > Tính toán liệt kê các giá trị CSS đã giải quyết mà Chrome sử dụng để hiển thị phần tử

• CSS bắt nguồn từ thừa kế
• người chiến thắng thác
• Thuộc tính viết tay (chính xác), không viết tắt (súc tích)
• Các giá trị được tính toán, ví dụ: width: 100%2 thay vì width: 100%3

# Hiểu CSS trong ngăn Điện toán

Khung Tính toán cũng hiển thị các thuộc tính khác nhau theo cách khác

# Được khai báo và kế thừa

Ngăn Điện toán liệt kê các thuộc tính được khai báo trong bất kỳ biểu định kiểu nào bằng phông chữ thông thường, cả sở hữu và kế thừa của phần tử. Nhấp vào biểu tượng mở rộng

Để xem phần khai báo trong ngăn Kiểu, hãy di chuột qua thuộc tính được mở rộng và nhấp vào nút mũi tên

Để xem khai báo trong ngăn Nguồn, hãy nhấp vào liên kết tới tệp nguồn

Đối với các thuộc tính có nhiều nguồn, ngăn Tính toán hiển thị người chiến thắng Xếp tầng trước tiên

# Thời gian chạy

Ngăn Tính toán liệt kê các giá trị thuộc tính được tính toán khi chạy trong văn bản nhạt .

Trong ví dụ này, Chrome đã tính toán như sau cho phần tử width: 100%4

• Người thân của width: 100%5 cha mẹ của nó, width: 100%6
• width: 100%7 liên quan đến con của nó, hai phần tử width: 100%8

# Không kế thừa và tùy chỉnh

Để ngăn Điện toán hiển thị tất cả các thuộc tính và giá trị của chúng, hãy chọn

• Giá trị ban đầu cho các thuộc tính không được kế thừa trong văn bản nhạt .
• Thuộc tính tùy chỉnh—với tiền tố width: 100%9 trong văn bản thông thường. Các thuộc tính như vậy được kế thừa theo mặc định

Gotchas

Ghi đè tính kế thừa mặc định không ảnh hưởng đến cách ngăn Tính toán hiển thị các thuộc tính. nhợt nhạt hay không

Để chia danh sách lớn này thành các danh mục, hãy kiểm tra Nhóm.

Ví dụ này hiển thị các giá trị ban đầu cho thuộc tính không được kế thừa trong Hoạt ảnh và thuộc tính tùy chỉnh trong Biến CSS

# Tìm kiếm trùng lặp

Để điều tra một thuộc tính cụ thể và các bản sao tiềm ẩn của thuộc tính đó, hãy nhập tên thuộc tính đó vào hộp văn bản Bộ lọc. Bạn có thể thực hiện việc này cả trong bảng Kiểu và Bảng điện toán

Tại sao kiểu CSS của tôi bị ghi đè?

Kiểu dáng HTML có ghi đè CSS không?

Kiểu phần tử trong CSS là gì?

Phong cách phần tử trong kiểm tra là gì?