Czy istnieje sposób resetowania właściwości CSS ramki, promienia obramowania i tła koloru?

Question

Używam Twitter bootstrap dla CSS strony, na której mam dane wejściowe. Bootstrap definiuje: border: 1px solid rgb (204, 204, 204); background-color: rgb (255, 255, 255); border-radius: 3px 3px 3px 3px; dla wybranych elementów.

Chcę zresetować (przez nadpisanie w moim własnym CSS) tych właściwości Bootstrap CSS. Próbowałem: auto, dziedziczę, brak. Ale żaden nie działa. Próbowałem również przedrostka -moz dla promienia. Bez powodzenia.

Widzę, że to nie działa, ponieważ w Firefoksie element, który nie ma granicy i NIE ma stylu obramowania i NIE jest koloru tła renderowany w podobny sposób, jak w przeglądarkach webkit.

Możesz to sprawdzić, komentując te reguły w Web Developer -> Inspect -> CSS view.

Jak mogę to wszystko zrobić bez dotykania biblioteki Bootstrap?

Answer 1

Deklaracje Bootstrap mają wyższą wartość od specificity.

Można to sprawdzić poprzez dodanie !important po deklaracji: border: none !important

Nie wysyłamy z tego kodu, jednak. Aby naprawić to we właściwy sposób, użyj innej klasy lub id, aby zastąpić CSS Bootstrapa.

Answer 2

Czy próbowałeś !important, nie zawsze jest to dobre rozwiązanie, ale może być przyczyną problemów, czytaj więcej o tym, kiedy może być użyteczne dla użytkownika ta metoda: here.

Answer 3

-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
-o-border-radius: 0px; 
border-radius: 0px; 
border: 0px; 

To powinno zresetować granice. Dopóki preferowane style pojawią się później niż te dostarczone przez Bootstrap, będą miały pierwszeństwo. Również -moz-appearance może pomóc w zastąpieniu domyślnych wyrażeń Firefoksa (lub zresetować je).

• https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

Answer 4

Aby zresetować właściwości, wartość użytkowa "początkowy", działa na wszystkich właściwości:

-webkit-border-radius: initial; 
-moz-border-radius: initial; 
-o-border-radius: initial; 
border-radius: initial; 
border: initial;