Pozdrowienia: Spędziłem wiele dni, próbując znaleźć narzędzie, które wyświetliłoby dokładny numer CSS dla każdej reguły CSS obliczonej przez przeglądarkę. Przeglądałem już wiele zasobów internetowych, w tym Tools to see CSS specificity - linki tam omawiane na temat nadpisywanych klas itp., Ale chcę zobaczyć dokładną liczbę obliczoną i używaną przez przeglądarkę przy stosowaniu określonych reguł CSS.Jak wyświetlić obliczoną specyficzność CSS przeglądarki?
Dlaczego trzeba wyświetlić dokładną specyfikację CSS? Nie mogę przezwyciężyć problemu, w którym przeglądarka używa reguł CSS w oparciu o bliskość tej reguły do elementu, ale mam zdefiniowaną wcześniej regułę, która powinna mieć wyższą specyfikację niż reguła stosowana przez przeglądarkę. Nie mam prostego kodu, za pomocą którego mógłbym zademonstrować użycie jsfiddle, a kod, który próbuję debugować, jest zbyt skomplikowany, by zawrzeć go w skrzypcach.
Prawie każde wyszukiwanie spowodowało, że ludzie wskazali na jakieś "reguły specyficzne dla CSS" lub "zrozumienie specyfiki CSS". Rozumiem, jak powinna wyglądać specyfika CSS, szeroko wykorzystuję narzędzia programistyczne Firebug i Chrome i dobrze znam linki, które wskazują na zasady specyfiki. Moją misją jest sprawdzenie, w jaki sposób silnik wyszukiwarki myśli o stosowaniu jednej reguły CSS w stosunku do innej! A ponieważ już obliczył tę informację, aby zdecydować, która reguła ma pierwszeństwo przed innymi regułami, powinna być dostępna informacja, ale nie wiem jak?
Bardzo baza przykład problemu Jestem stoi: (. Nie ma żadnego różni się ostateczny wynik)
.testClass1 .title, .testClass2 .testClass1 .title { corresponding CSS styles }
.testClass2 .title, .testClass1 .testClass2 .title { corresponding CSS styles }
Albo może to być kodowane coś takiego ....
.testClass1 .title { corresponding CSS styles } --- call it Rule 1
.testClass2 .testClass1 .title { corresponding CSS styles } --- call it Rule 2
.testClass2 .title { corresponding CSS styles } --- call it Rule 3
.testClass1 .testClass2 .title { corresponding CSS styles } --- call it Rule 4
i struktury HTML wygląda tak ...
<!-- delivers intended results -->
<div class="testClass1">
<div class="title">Some Title</div>
</div>
<!-- Does not deliver intended results.
- I expected Rule 1 or Rule 2 to take effect, but Rule 3 gets
applied because of its proximity to the actual HTML element.
i.e. rule 3 is defined later in CSS then rule 1 and 2. -->
<div class="testClass2">
<div class="testClass1">
<div class="title">Some Title</div>
</div>
</div>
Myślałem najlepszy sposób debugowania to Sue będzie zobaczyć, jaka była obliczalność specyficzna dla CSS przeglądarki, a nie dla mnie, gdy muszę przyjmować pewne reguły i ręcznie obliczać je za każdym razem. Przeglądarka już to obliczyła podczas stosowania, więc szukałem narzędzi, które pozwoliłyby przeglądać obliczenia tych reguł specyficzne dla przeglądarki, ale nie znalazłem żadnego sposobu, aby to zrobić w Inspektorze Firebug lub Chrome.
Czy ktoś inny wie o tym i czy ktoś może wskazać mi narzędzie, które może istnieć? Bardzo doceniam twoją pomoc. Dziękuję Ci!
EDIT: starałem się ułożyła skrzypce, aby zobaczyć, czy mogę odtworzyć „coś takiego, co walczę z” wykazać. Chyba mam szczęście - zobacz http://jsfiddle.net/smallworld/abvHC/1/. Problem w tym skrzypcach jest nadal zbyt prosty, ale jest to rodzaj reprezentatywny dla mojego wyzwania, w którym klasy są przydzielane dynamicznie, więc nie mam możliwości przewidzenia dokładnej kolejności. Przykład 3 w skrzypcach jest dość reprezentatywnym przypadkiem, dlaczego potrzebowałem zobaczyć obliczoną specyfikę. W każdym razie byłoby wspaniale móc porównać obliczoną liczbę z kalkulacją przeglądarki.
KOLEJNY EDIT: Choć nadal nie ma odpowiedzi na moje poszukiwania zajrzeć do wyniku specyficzności przeglądarki dla danego elementu, myślę, Faust i inni doprowadziły mnie do ewentualnego rozwiązania pierwotnego problemu byłem okładzina. Zobacz wątek komentarzy poniżej.Biorąc pod uwagę, że pytanie dotyczy możliwości wyświetlenia wyniku specyficzności przeglądarki, równie dobrze mogę pozostawić to pytanie otwarte - najprawdopodobniej odpowiedź będzie polegać na tym, że obecnie nie ma dostępnych narzędzi, które by to umożliwiały.
Narzędzia programistyczne pokazują wszystkie te informacje (z wyjątkiem rzeczywistych numerów) – SLaks
Dlaczego nie obliczyć samodzielnie? Twoja specyfika to ** 0,2,0 **, ** 0,3,0 **, ** 0,2,0 ** i ** 0,3,0 ** odpowiednio ... Są nie są trudne do obliczenia, a przeglądarki nie obliczają ich inaczej niż jakakolwiek inna przeglądarka. Zasada 2 jest bardziej konkretna niż Zasada 3 i zawsze ją przebije. Jeśli widzisz nieoczekiwane wyniki, masz gdzieś inne style lub literówki. Gwarantuję, że przeglądarka nie stosuje CSS w oparciu o "bliskość". Spróbuj sprawdzić Narzędzia programistyczne Chrome, aby zobaczyć, które selektory CSS pasują do Twojego elementu i upewnij się, że Twój CSS jest prawidłowy. – animuson
SLaks - ta dokładna liczba jest tym, czego szukam, ponieważ moje zrozumienie i interpretacja przeglądarki wydają się nie zgadzać, więc chcę zrozumieć, czego mi brakuje ... – smallworld