Co oznaczają właściwości skrzyżowanego stylu w devtools Google Chrome?

274

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?

css google-chrome google-chrome-devtools rohitmishra
źródło
4
Spodziewałem się tego pytania. +1 za to.
Rajesh Paul

Odpowiedzi:

314

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).

Jacob Mattison
źródło
18
Na marginesie, przekreślone właściwości mogą być właściwościami „anulowanymi” przez właściwości o tych samych nazwach później w tej samej regule CSS (zgodnie z wymaganiami specyfikacji CSS)
Alexander Pavlov,
57
@JacobM: Jak się dowiedzieć, która właściwość zastępuje właściwość strikowaną.
ArunRaj
51
@ArunRaj - Nie ma łatwego sposobu na stwierdzenie, która właściwość (lub właściwości) przesłania przekreśloną. Jedną z opcji jest zajrzenie na zakładkę „obliczone” style w celu znalezienia tego samego typu właściwości, a następnie, jeśli rozwiniesz, powinieneś zobaczyć źródło różnych reguł, które próbują zastosować tę właściwość (w tym tę, która jest rzeczywiście aktywna) . Więc jeśli zobaczysz, że „font-size: 11px” jest przekreślony, poszukaj w obliczonych właściwościach „font-size”, i powinieneś zobaczyć wszystkie miejsca, w których zastosowano rozmiar czcionki, w tym faktycznie aktywny. Mam nadzieję że to pomoże.
Jacob Mattison
7
Na górze karty Style znajduje się teraz pole Filtr. Jeśli zastanawiasz się, co zostało zastąpione, 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.
joeytwiddle 11.04.16
4
Chciałem również dodać: jeśli styl jest wykreślony, ale jest już na górze, możesz mieć gdzieś styl CSS, !importantktóry go zastępuje.
Dominic K
12

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 **
sanjihan
źródło
co jeśli zapytania o media znajdują się w innym pliku css?
Carlos Hernández Gil
11

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ć.

Rishul Matta
źródło
8

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.

Nanda
źródło
Miałem problemy ze skalowaniem GoogleMapy dla telefonów komórkowych przez media. Mam podstawowe ustawienie dla przeglądarek (bez mediów), a następnie różne media o mniejszych rozmiarach, co nie zadziałało (poprawny styl dla urządzeń mobilnych pokazany w GC, ale z przekreśleniem). Po dodaniu! Ważne, to działa, ale nie rozumiem „logiki”
stojącej
-5

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.

hien711
źródło
2
Pytanie nie dotyczyło „żółtych ostrzeżeń”. Ta odpowiedź powinna zawierać co najwyżej komentarz.
Simon