Resetuj / Usuń style CSS tylko dla elementu

Dla przyszłych czytelników. Myślę, że tak było, ale obecnie nie jest naprawdę szeroko wspierany (patrz poniżej):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• obsługiwane w (źródło ): Chrome 37, Firefox 27, IE 11, Opera 24
• nieobsługiwane: Safari

Pozwól, że odpowiem dokładnie na to pytanie, ponieważ od kilku lat jest ono dla mnie źródłem bólu i bardzo niewiele osób naprawdę rozumie problem i dlaczego jest ważne, aby go rozwiązać. Gdybym był w ogóle odpowiedzialny za specyfikację CSS, byłbym zażenowany, szczerze mówiąc, że nie zająłem się tym w ciągu ostatniej dekady.

Problem

Musisz wstawić znaczniki do dokumentu HTML i musi on wyglądać w określony sposób. Ponadto, nie jesteś właścicielem tego dokumentu, więc nie można zmienić istniejących reguł stylu. Nie masz pojęcia, czym mogą być arkusze stylów , ani na co mogą się zmienić.

Przypadki użycia są wtedy, gdy dostarczasz komponent do wyświetlania dla nieznanych witryn stron trzecich do użycia. Przykład:

1. tag reklamowy
2. budowanie rozszerzenia przeglądarki, które wstawia zawartość
3. dowolny typ widgetu

Najprostsza Poprawka

Umieścić wszystko w iframe. To posiada własny zestaw ograniczeń:

1. ograniczenia między domenami: zawartość nie będzie miała dostępu do oryginalnego dokumentu. Nie można nakładać zawartości, modyfikować DOM itp.
2. ograniczenia wyświetlania: zawartość jest zablokowana wewnątrz prostokąta.

Jeśli zawartość może zmieścić się w pudełku, możesz obejść problem #1, każąc treść napisać ramkę iframe i jawnie ustawić zawartość, a tym samym ominąć problem, ponieważ ramka iframe i document będzie współdzielić tę samą domenę.

CSS Solution

Szukałem daleko i szeroko rozwiązania tego problemu, ale niestety nie ma żadnego. Najlepsze, co możesz zrobić, to jawnie nadpisać wszystkie możliwe właściwości, które mogą być nadpisane, i nadpisać je do tego, co myślisz ich domyślna wartość powinna być.

Nawet gdy nadpisujesz, nie ma sposobu, aby upewnić się, że bardziej ukierunkowana reguła CSS nie nadpisuje Twojej. Najlepsze, co możesz tutaj zrobić, to mieć swój nadpisuj reguły tak dokładnie, jak to możliwe i mam nadzieję, że dokument nadrzędny nie przypadkowo go wykorzysta: użyj niejasnego lub losowego identyfikatora na elemencie nadrzędnym treści i użyj !ważne dla wszystkich definicji wartości nieruchomości.

Jest zupełnie nowe rozwiązanie tego problemu.

Potrzebujesz "dostępnej reguły css, która usunie wszystkie style wcześniej ustawione w arkuszu stylów dla określonego elementu."

Więc, jeśli element ma nazwę klasy jak remove-all-styles:

Eg:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

Z CSS:

  .remove-all-styles {
    all: revert;
  }

Zresetuje wszystkie style zastosowane przez other-class, another-class i wszystkie inne style dziedziczone i stosowane do tego div.

Lub w Twoim case:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

Tutaj użyliśmy jednej fajnej właściwości CSS z inną fajną wartością CSS.

1. revert

Faktycznie revert jest, jak sama nazwa mówi, przywraca tę właściwość do styl user lub user-agent.

1. all

I kiedy używamy revert z właściwością all, wszystkie właściwości CSS zastosowane do tego elementu zostaną przywrócone do stylów user/user-agent.

Kliknij tutaj, aby poznaj różnicę między stylami autor, użytkownik, użytkownik-agent.

Dla ex: jeśli chcemy wyodrębnić osadzone widżety/komponenty ze stylów strony, która je zawiera , możemy napisać:

.isolated-component {
 all: revert;
}

, który przywróci wszystkie author styles (tj. programista CSS) do user styles (style, które użytkownik naszej strony ustawia - scenariusz mniej szans) lub do user-agent stylów, jeśli nie ma ustawionych stylów użytkownika.

Więcej szczegółów tutaj: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

I jedynym problemem jest wsparcie : tylko Safari 9.1 i iOS Safari 9.3 mają wsparcie dla revert wartość w momencie pisania.

Więc powiem użyć tego stylu i wycofać się do innych odpowiedzi.

Inne Sposoby:

1) dołącz kod css (plik) Yahoo CSS reset a następnie umieść wszystko w tym DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) lub użyć http://www.cssreset.com

Nie polecam korzystania z odpowiedzi, która została tutaj oznaczona jako poprawna. Jest to ogromna plama CSS, która stara się pokryć wszystko.

Sugerowałbym, abyś oceniał, jak usunąć styl z elementu w zależności od przypadku.

Powiedzmy, że dla celów SEO musisz umieścić H1 na stronie, która nie ma rzeczywistego nagłówka w projekcie. Możesz chcieć, aby link nawigacyjny tej strony był H1, ale oczywiście nie chcesz, aby link nawigacyjny wyświetlał się jako gigantyczny H1 na strona.

Należy zawinąć ten element w znacznik h1 i sprawdzić go. Zobacz, jakie style CSS są stosowane specjalnie do elementu h1.

Powiedzmy, że widzę następujące style zastosowane do elementu.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Teraz musisz przypiąć dokładny styl, który zostanie zastosowany do H1 i odłączyć je w klasie css. Wyglądałoby to mniej więcej tak:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Jest to o wiele czystsze i nie tylko wrzuca losową plamkę kodu do css, który nie wiesz, co to właściwie robi.

Teraz możesz dodać tę klasę do swojego h1

<h1 class="no-style-h1">
     Title
</h1>

Jeśli zdarzy ci się używać sass w systemie budowania, jednym ze sposobów, aby to zrobić, który będzie działał we wszystkich głównych przeglądarkach, jest owinięcie wszystkich importowanych stylów selektorem :not() w ten sposób...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Następnie możesz użyć klasy disable na kontenerze, a pod-zawartość nie będzie miała żadnego z Twoich stylów.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

Oczywiście wszystkie style będą teraz poprzedzone selektorem: not (), więc jest to trochę fugawe, ale działa dobrze.

W moim konkretnym scenariuszu chciałem pominąć stosowanie wspólnych stylów do określonej części strony, lepiej zilustrowane TAK:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

Po zamieszaniu z resetem CSS, który nie przyniósł większego sukcesu (głównie ze względu na pierwszeństwo reguł i skomplikowaną hierarchię arkuszy stylów), na ratunek pojawił się wszechobecny jQuery, który wykonał zadanie bardzo szybko i dość brudnie: {]}

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(teraz powiedz jak źle jest używać JS do radzenia sobie z CSS : -))

Wspomniałeś o stronach mobilnych... Aby uzyskać responsywny projekt, z pewnością można zastąpić Style na małym ekranie stylami na dużym ekranie. Ale możesz nie potrzebować.

Spróbuj tego:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Te zapytania nie nakładają się na siebie, więc ich reguły się nie nadpisują. Ułatwia to utrzymanie każdego zestawu stylów oddzielnie.

Dla tych z Was, którzy próbują dowiedzieć się, jak usunąć stylizację tylko z elementu, bez usuwania css z plików, to rozwiązanie działa z jquery:

$('.selector').removeAttr('style');

Jeśli ustawisz swój CSS w klasach, można je łatwo usunąć za pomocą metody jQuery removeClass (). Poniższy kod usuwa .Klasa elementu:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

Jeśli nie podano żadnego parametru, metoda ta usunie Wszystkie nazwy klas z wybranych elementów.

Jakaś szansa, że szukasz !ważna zasada? Nie cofa wszystkich deklaracji, ale zapewnia sposób na ich nadpisanie.

"kiedy an !ważna reguła jest używana w deklaracji stylu, ta deklaracja zastępuje wszelkie inne deklaracje złożone w CSS, gdziekolwiek jest na liście deklaracji. Chociaż, !ważne nie ma nic wspólnego ze specyfiką."

Https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_! important_exception

LEPSZE ROZWIĄZANIE

Pobierz arkusz stylów "Kopiuj / Wklej", aby zresetować domyślne właściwości css (styl UA):
https://github.com/monmomo04/resetCss.git

Thanks @ Milche Patern!
Naprawdę Szukałem wartości właściwości reset/default style. Moją pierwszą próbą było skopiowanie obliczonej wartości z narzędzia browser Dev elementu głównego (html). Ale jak to obliczyło, to wyglądało / działało inaczej na każdym systemie.
Dla tych, którzy napotkają przeglądarkę awaria podczas próby użycia gwiazdki *, aby zresetować styl elementów dziecięcych, a ponieważ wiedziałem, że nie działa dla Ciebie, zastąpiłem gwiazdkę " * "nazwą wszystkich znaczników HTML. Przeglądarka się nie zawiesiła, jestem na Chrome w wersji 46.0.2490.71 m.
Na koniec warto wspomnieć, że te właściwości zresetują styl do domyślnego stylu elementu głównego topest, ale nie do wartości początkowej dla każdego elementu HTML. Aby to poprawić, wziąłem style "user-agent" przeglądarkę opartą na webkit i zaimplementował ją w klasie "reset-this".

Pobierz arkusz stylów "Kopiuj / Wklej", aby zresetować domyślne właściwości css (styl UA):
https://github.com/monmomo04/resetCss.git

Styl User-agent:
domyślne CSS przeglądarki dla elementów HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Specyfika Css (zwróć uwagę na specyfikę) :
https://css-tricks.com/specifics-on-css-specificity/

Https://github.com/monmomo04/resetCss.git

Nie, to tylko kwestia lepszego zarządzania strukturą css.

W Twoim przypadku zamówiłbym css coś takiego:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}