Podczas sprawdzania elementu za pomocą narzędzi devtools Chrome, na karcie elementów po prawej stronie paska „Style” wyświetlane są odpowiednie właściwości CSS. Czasami niektóre z tych właściwości są przekreślone. Co oznaczają te właściwości?
Odpowiedzi:
Gdy właściwość CSS jest wyświetlana jako przekreślona, oznacza to, że zastosowano styl przekreślony, ale następnie zastąpiono go bardziej szczegółowym selektorem, bardziej lokalną regułą lub późniejszą właściwością w ramach tej samej reguły.
(Przypadki specjalne: styl zostanie również wyświetlony jako przekreślony, jeśli styl istnieje w pasującej regule, ale jest skomentowany lub jeśli ręcznie go wyłączyłeś, odznaczając go w narzędziach programistycznych Chrome. Pojawi się również jako przekreślony obecnie, ale z ikoną błędu, jeśli styl zawiera błąd składniowy).
Na przykład, jeśli kolor tła został zastosowany do wszystkich divs, ale inny kolor tła został zastosowany do divs o określonym identyfikatorze, pierwszy kolor pojawi się, ale zostanie przekreślony, ponieważ drugi kolor go zastąpił (we właściwości lista divz tym identyfikatorem).
border-colorpo prostu wpisz border-colorw Filtr. Wyświetli wszystkie reguły zawierające tę właściwość, właściwość podświetlona na żółto. Ta funkcja jest również dostępna w przeglądarce Firefox.
!importantktóry go zastępuje.
Na marginesie. Jeśli korzystasz z zapytań @media (np. @media screen (max-width:500px), Zwróć szczególną uwagę na zastosowanie zapytania @media PO zakończeniu normalnych stylów. Ponieważ zapytanie @media zostanie przekreślone (nawet jeśli jest bardziej szczegółowe), jeśli nastąpi po nim css, który manipuluje tymi samymi elementami. Przykład:
@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 **
Oprócz powyższej odpowiedzi chcę również podkreślić przypadek wykreślonej nieruchomości, która naprawdę mnie zaskoczyła.
Jeśli dodajesz obraz tła do div:
<div class = "myBackground">
</div>
Chcesz przeskalować obraz, aby pasował do wymiarów div, aby była to twoja normalna definicja klasy.
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
ale jeśli zamienisz zamówienie jako:
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
potem w chromie zobaczysz przekreślony rozmiar tła. Nie jestem pewien, dlaczego tak jest, ale tak, nie chcesz z tym zadzierać.
Jeśli chcesz zastosować styl nawet po otrzymaniu wskazania przekreślenia, możesz użyć go "!important"do wymuszenia stylu. Może to nie być właściwe rozwiązanie, ale rozwiązanie problemu.
W niektórych przypadkach skopiowanie i wklejenie kodu CSS powoduje uszkodzenie formatu, dlatego Chrome wyświetla żółte ostrzeżenie. Powinieneś spróbować ponownie sformatować kod CSS i powinno być w porządku.