Thuộc tính kiểu được gạch chéo trong devtools của Google Chrome có nghĩa là gì?

Question

Trong khi kiểm tra một phần tử bằng cách sử dụng các công cụ tìm kiếm của Chrome, trong tab yếu tố, thanh 'Kiểu' bên phải hiển thị các thuộc tính CSS tương ứng. Đôi khi, một số thuộc tính này bị tấn công. Những đặc tính này có ý nghĩa gì?

Answer 1

Khi thuộc tính CSS hiển thị là bị xuyên thủng, có nghĩa là kiểu gạch chéo được áp dụng, nhưng sau đó được ghi đè bằng công cụ chọn cụ thể hơn, quy tắc địa phương hơn hoặc thuộc tính sau trong cùng một quy tắc.

(Các trường hợp đặc biệt: kiểu cũng sẽ được hiển thị là bị đánh dấu nếu kiểu có trong quy tắc phù hợp nhưng được nhận xét hoặc nếu bạn đã tắt theo cách thủ công bằng cách bỏ chọn nó trong công cụ dành cho nhà phát triển Chrome. cũng hiển thị là bị gạch ngang, nhưng có biểu tượng lỗi, nếu kiểu có lỗi cú pháp.)

Ví dụ: nếu màu nền được áp dụng cho tất cả div s, nhưng màu nền khác được áp dụng cho div s một id nhất định, màu đầu tiên sẽ hiển thị nhưng sẽ bị gạch chéo, vì màu thứ hai đã thay thế nó (trong danh sách thuộc tính cho số div với id đó).

Answer 2

Ngoài câu trả lời ở trên, tôi cũng muốn nêu bật một trường hợp tài sản bị làm nổi bật khiến tôi ngạc nhiên.

Nếu bạn đang thêm một hình ảnh nền cho một div:

<div class = "myBackground"> 

</div> 

Bạn muốn chia tỷ lệ ảnh để phù hợp với kích thước của div vì vậy đây sẽ là định nghĩa lớp bình thường của bạn.

.myBackground { 

height:100px; 
width:100px; 
background: url("/img/bck/myImage.jpg") no-repeat; 
background-size: contain; 

} 

nhưng nếu bạn trao đổi thứ tự như sau: -

.myBackground { 
height:100px; 
width:100px; 
background-size: contain; //before the background 
background: url("/img/bck/myImage.jpg") no-repeat; 
} 

sau đó trong chrome bạn sẽ thấy background-kích thước như striked ra. Tôi không chắc chắn tại sao điều này, nhưng yeah bạn không muốn gây rối với nó.

Answer 3

Trên ghi chú bên. Nếu bạn đang sử dụng các truy vấn @media (chẳng hạn như @media screen (max-width:500px)) hãy đặc biệt chú ý đến việc áp dụng truy vấn @media SAU bạn đã hoàn tất các kiểu bình thường. Bởi vì truy vấn @media sẽ bị gạch chéo (mặc dù nó cụ thể hơn) nếu theo sau là css điều khiển các phần tử giống nhau. Ví dụ:

@media (max-width:750px){ 
#buy-box {width: 300px;} 
} 

#buy-box{ 
width:500px; 
} 

** width will be 500px and 300px will be crossed out in Developer Tools. ** 

#buy-box{ 
width:500px; 
} 

@media (max-width:750px){ 
#buy-box {width: 300px;} 
} 

** width will be 300px and 500px will be crossed out ** 

Answer 4

Có một số trường hợp bạn sao chép và dán mã CSS ở đâu đó và nó phá vỡ định dạng để Chrome hiển thị cảnh báo màu vàng. Bạn nên thử định dạng lại mã CSS và nó sẽ ổn.

Answer 5

Nếu bạn muốn áp dụng phong cách ngay cả sau khi nhận được dấu hiệu đâm thủng, bạn có thể sử dụng "!important" để thực thi kiểu. Nó có thể không phải là một giải pháp đúng nhưng giải quyết vấn đề.