Zastąpienie arkusza stylów użytkownika agenta - Chrome

Question

Mam element listy, który jest wyświetlany na stronie przy użyciu efektu hover. Wyzwanie, z którym się spotykam, polega na tym, że stosuję obramowanie lub tło do elementu listy, wygląda to okropnie z powodu dopełnienia, które jest generowane automatycznie.

Popatrz na to zdjęcie, proszę.

Proszę, pomóżcie mi go przesłonić.

Przeszukałem już fora, ale udało mi się je tylko zamienić na off z poziomu konsoli, aby nie przejechały.

Answer 1

Wystarczy dodać następujący styl:

ul { padding:0 } 

To będzie zastąpić domyślny styl.

Answer 2

Arkusze stylów z różnych źródeł mają różne precedensami:

od najniższego do najwyższego (*):

• style kliencka => są to style widać na zrzucie ekranu
• style użytkownika
• autor style CSS (uważaj na pierwszeństwo)
• autor inline style
• style autorem z !important
• stylów użytkownika z !important

agenta użytkownika = przeglądarka
autor = ty
user = użytkownik przeglądarka

Więc dla ciebie, wszystko, czego potrzebujesz, to zadeklarowanie

ul { padding:0 } 

i spowoduje to zastąpienie stylów UA. Jeśli jednak użytkownik zadeklarowałby własne style za pomocą !important, nic nie można z tym zrobić jako autora - (na szczęście dla użytkownika) nie można nadpisać tych stylów.

^{* W rzeczywistości kaskadowa natura jest jeszcze bardziej złożona, niż wynikałoby to z tej listy, której nie obejmowałem ze względu na prostotę. Jeśli jesteś zainteresowany tym, spójrz na CSS precendence.}