Co oznaczają właściwości stylu krzyżowego w Google Chrome devtools?
Podczas sprawdzania elementu za pomocą devtools Chrome, na karcie Elementy Pasek "Style" po prawej stronie pokazuje odpowiednie właściwości CSS. Czasami niektóre z tych właściwości są uderzane. Co oznaczają te właściwości?
5 answers
Gdy właściwość CSS pokazuje jako przebitą, oznacza to, że styl przekreślony został zastosowany, ale następnie nadpisany przez bardziej szczegółowy selektor, bardziej lokalną regułę lub przez późniejszą właściwość w ramach tej samej reguły.
(przypadki specjalne: styl będzie również wyświetlany jako przebijany, jeśli Styl istnieje w regułach dopasowania, ale jest komentowany lub jeśli ręcznie go wyłączyłeś, odznaczając go w narzędziach programistycznych Chrome. Będzie również wyświetlany jako przekreślony, ale z ikoną błędu, jeśli styl ma błąd składni.)
Na przykład, jeśli kolor tła został zastosowany do wszystkich divs, ale inny kolor tła został zastosowany do divS z określonym identyfikatorem, pierwszy kolor pojawi się, ale zostanie przekreślony, ponieważ drugi kolor zastąpił go (na liście właściwości dla {[0] } z tym identyfikatorem).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-09 20:07:00
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 tak, aby pasował do wymiarów div, więc będzie to normalna definicja klasy.
.myBackground {
height:100px;
width:100px;
background: url("/img/bck/myImage.jpg") no-repeat;
background-size: contain;
}
Ale jeśli zamienisz kolejność na: -
.myBackground {
height:100px;
width:100px;
background-size: contain; //before the background
background: url("/img/bck/myImage.jpg") no-repeat;
}
Następnie w chrome zobaczysz rozmiar tła jako wykreślony. Nie jestem pewien, dlaczego tak jest, ale tak ty nie chcę z tym zadzierać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-24 13:31:48
Na marginesie. Jeśli używasz zapytań @media (takich jak @media screen (max-width:500px)) zwróć szczególną uwagę na stosowanie zapytań @media Po skończysz z normalnymi stylami. Ponieważ @ media query zostanie przekreślone (nawet jeśli jest bardziej szczegółowe), jeśli po nim pojawi się 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 **
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-06 08:49:09
Jeśli chcesz zastosować styl nawet po tym, jak zostanie uderzony-trough indication, możesz użyć "!important", aby wyegzekwować styl. Może to nie jest właściwe rozwiązanie, ale Rozwiąż problem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-17 05:20:05
Są pewne przypadki, gdy kopiujesz i wklejasz kod CSS gdzieś i łamie format, więc Chrome pokazuje żółte Ostrzeżenie. Powinieneś spróbować ponownie sformatować kod CSS i powinno być dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-16 08:17:11