Khi kiểm tra một phần tử bằng devtools của Chrome, trong tab phần 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ố trong những tài sản này được thông qua. Những tính chất này có nghĩa là gì?
Câu trả lời:
Khi một thuộc tính CSS hiển thị dưới dạng xuyên suốt, điều đó có nghĩa là kiểu gạch chéo đã được áp dụng, nhưng sau đó bị ghi đè bởi một bộ chọn cụ thể hơn, quy tắc cục bộ hơn hoặc bởi một thuộc tính sau trong cùng quy tắc.
(Các trường hợp đặc biệt: một kiểu cũng sẽ được hiển thị dưới dạng xuyên suốt nếu một kiểu tồn tại trong quy tắc khớp nhưng được nhận xét hoặc nếu bạn đã tắt nó theo cách thủ công bằng cách bỏ chọn nó trong các công cụ dành cho nhà phát triển Chrome. nhưng với biểu tượng lỗi, nếu kiểu có lỗi cú pháp.)
Ví dụ: nếu một màu nền được áp dụng cho tất cả các divs, nhưng một màu nền khác được áp dụng cho divs với một id nhất định, màu đầu tiên sẽ hiển thị nhưng sẽ bị gạch bỏ, vì màu thứ hai đã thay thế nó (trong thuộc tính danh sách cho divid đó).
border-colorthì chỉ cần gõ border-colorvào Bộ lọc. Nó sẽ hiển thị tất cả các quy tắc có chứa tài sản đó, với thuộc tính được tô sáng màu vàng. Tính năng này cũng có sẵn trong Firefox.
!importantđó là ghi đè lên nó.
Còn một chú ý đáng nói. 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 chú ý đặc biệt đến việc áp dụng truy vấn @media SAU KHI bạn đã hoàn thành các kiểu thông thường. Bởi vì truy vấn @media sẽ bị gạch bỏ (mặc dù nó cụ thể hơn) nếu theo sau là css thao tác các phần tử tương tự. Thí 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 **Ngoài câu trả lời trên tôi cũng muốn làm nổi bật một trường hợp bất động sản nổi bật khiến tôi thực sự 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ệ hình ảnh cho 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ư: -
.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 kích thước nền như nổi bật. Tôi không chắc tại sao lại như vậy, nhưng vâng, bạn không muốn gây rối với nó.
Nếu bạn muốn áp dụng kiểu ngay cả sau khi nhận được dấu hiệu má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 đề.
Có một số trường hợp khi bạn sao chép và dán mã CSS vào một nơi nào đó 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 một lần nữa và nó sẽ ổn.