Réinitialiser/supprimer les styles CSS pour l'élément seulement

Pour les futurs lecteurs. Je pense que c'est ce que l'on voulait dire mais n'est actuellement pas vraiment large pris en charge (voir ci-dessous):

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

• pris en charge dans ( source ): Chrome 37, Firefox 27, IE 11, Opera 24
• non supporté: Safari

Permettez-moi de répondre à cette question en détail, parce que cela a été une source de douleur pour moi pendant plusieurs années et très peu de gens comprennent vraiment le problème et pourquoi il est important de le résoudre. Si j'étais du tout responsable de la spécification CSS, je serais gêné, franchement, de ne pas avoir abordé ce sujet au cours de la dernière décennie.

Le Problème

vous devez insérer un markup dans un document HTML, et il doit avoir l'air d'un de manière spécifique. De plus, ce document ne vous appartient pas, vous ne pouvez donc pas modifier les règles de style existantes. Vous n'avez aucune idée de ce que les feuilles de style pourraient être , ou ce qu'ils peuvent changer pour.

cas D'utilisation pour ce sont lorsque vous fournissez un composant displayable pour les sites Web de tiers inconnus à utiliser. Exemples:

"1519130920 Un" tag
1. construction d'une extension de navigateur qui insère le contenu
2. tout type de widget

Fixation La Plus Simple

mettez tout dans un iframe. Il a ses propres limites:

1. limites des domaines croisés: votre contenu n'aura pas du tout accès au document original. Vous ne pouvez pas superposer le contenu, modifier le DOM, etc.
2. limitations D'Affichage: votre contenu est verrouillé à l'intérieur d'un rectangle.

si votre contenu peut s'insérer dans une boîte, vous pouvez contourner le problème #1 en demandant à votre contenu d'écrire une iframe et de définir explicitement le contenu, contournant ainsi la question, puisque l'iframe et le document partageront le même domaine.

CSS Solution

j'ai cherché partout la solution à ce problème, mais il n'y en a malheureusement pas. Le mieux que vous can do est explicitement override toutes les propriétés possibles qui peuvent être dépassées, et les override à ce que vous pensez leur valeur par défaut devrait être.

même si vous outrepassez, il n'y a aucun moyen de s'assurer qu'une règle CSS plus ciblée n'outrepassera pas la vôtre . Le mieux que vous pouvez faire ici est d'avoir vos règles de surpassement ciblées aussi spécifiquement que possible et d'espérer que le document parent n'est pas accidentellement le meilleur: utiliser un obscur ou aléatoire Identifiez L'élément parent de votre contenu et utilisez-le !important sur toutes les définitions de valeur de propriété.

il y a une toute nouvelle solution trouvée à ce problème.

Vous avez besoin de "Une règle css qui seraient supprimer tous les styles précédemment défini dans la feuille de style d'un élément particulier."

ainsi, si l'élément a un nom de classe comme remove-all-styles :

par exemple:

HTML:

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

avec CSS:

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

va réinitialiser tous les styles appliqués par other-class , another-class et tous les autres styles hérités et appliqués à ce div .

ou dans votre cas:

/* 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;
  }
}

fera l'affaire.

ici, nous avons utilisé une propriété cool CSS avec une autre valeur cool css.

1. revert

en Fait revert est, comme son nom l'indique, revient bien pour ça Style utilisateur ou utilisateur-agent.

2. all

et lorsque nous utilisons revert avec la propriété all , toutes les propriétés CSS appliqué à cet élément sera retourné aux styles utilisateur/user-agent.

Cliquez ici pour connaître la différence entre les styles auteur, utilisateur, user-agent.

pour exemple: si nous voulons isoler widgets encastrés / composants des styles de la page qui les contient , nous pourrions écrire:

.isolated-component {
 all: revert;
}

qui renverse tous les author styles (c. - à-d. développeur CSS) à user styles (styles que l'utilisateur de notre scénario de jeu de hasard de site web) ou à user-agent styles lui-même si aucun style Utilisateur n'est mis.

plus de détails ici: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

et le seul problème est le support : seuls Safari 9.1 et iOS Safari 9.3 ont support pour la valeur revert au moment de la rédaction.

donc je vais vous dire d'utiliser ce style et de repli sur toutes les autres réponses.

d'une autre manière:

1) inclure le code css (fichier) de Yahoo CSS reset et puis tout mettre à l'intérieur de cette DIV:

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

2) ou utiliser http://www.cssreset.com

Je ne recommande pas d'utiliser la réponse qui a été corrigée ici. C'est un énorme bloc de CSS qui essaie de couvrir tout.

je vous suggère d'évaluer comment faire pour supprimer le style d'un élément au cas par cas.

disons que pour des raisons de référencement vous devez inclure un H1 sur une page qui n'a pas de titre réel dans la conception. Vous pourriez vouloir faire le lien nav de cette page un H1 mais bien sûr vous ne voulez pas que lien de navigation pour afficher comme un géant H1 sur la page.

ce que vous devez faire est d'envelopper cet élément dans une étiquette h1 et de l'inspecter. Voyez quels styles CSS sont appliqués spécifiquement à l'élément h1.

disons que je vois les styles suivants appliqués à l'élément.

//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;
}

Maintenant, vous devez pointer le style exact qui sont appliqués à la H1 et les désactiver dans une classe css. Cela ressemblerait à quelque chose comme le suivant:

.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;
}

C'est beaucoup plus propre et ne se contente pas de jeter un blob aléatoire de code dans votre css que vous ne savez pas ce qu'il fait réellement.

maintenant vous pouvez ajouter cette classe à votre h1

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

si vous utilisez sass dans un système de construction, une façon de faire cela qui fonctionnera dans tous les principaux navigateurs est d'envelopper toutes vos importations de style avec un sélecteur :not() comme ça...

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

alors vous pouvez utiliser la classe disable sur un conteneur et le sous-Contenu n'aura aucun de vos styles.

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

bien sûr, tous vos styles seront maintenant programmés avec le sélecteur :not (), donc c'est un peu fugly, mais ça marche bien.

dans mon scénario spécifique, j'ai voulu sauter l'application de styles communs à une partie spécifique de la page, mieux illustrée comme ceci:

<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>

après avoir joué avec CSS reset qui n'a pas apporté beaucoup de succès (principalement en raison de la priorité des règles et de la hiérarchie complexe des feuilles de style), a soulevé jQuery omniprésente à la rescousse, qui a fait le travail très rapidement et raisonnablement sale:

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

(maintenant dites à quel point il est mauvais d'utiliser JS pour traiter avec CSS: -))

vous avez mentionné mobile-premiers sites... Pour une conception réactive, il est certainement possible de passer outre les styles de petit écran avec les styles de grand écran. Mais vous ne pourriez pas besoin.

essayez ceci:

.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. */
    }
}

les requêtes des médias ne se chevauchent pas, donc leurs règles ne s'annulent pas. Cela rend plus facile à maintenir chaque ensemble de styles séparément.

pour ceux d'entre vous qui essaient de comprendre comment réellement supprimer le style de l'élément seulement, sans enlever le css des fichiers, Cette solution fonctionne avec jquery:

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

si vous définissez votre CSS dans les classes, vous pouvez facilement les supprimer en utilisant la méthode jQuery removeClass (). Le code ci-dessous supprime .classe d'élément:

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

si aucun paramètre n'est spécifié, cette méthode supprimera Tous les noms de classe des éléments sélectionnés.

N'importe quelle chance vous cherchez le !règle importante? Cela n'efface pas toutes les déclarations, mais il fournit un moyen de les remplacer.

" quand un !une règle importante est utilisée sur une déclaration de style, cette déclaration l'emporte sur toute autre déclaration faite dans la CSS, où qu'elle se trouve dans la liste des déclarations. Bien que,!important n'a rien à voir avec la spécificité."

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_-oui.important_exception

BETTER SOLUTION

Télécharger "copier/coller" de la feuille de style pour réinitialiser les propriétés css par défaut (UA style):

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

Merci@Milche Patern!

Je cherchais vraiment la valeur des propriétés de style reset/default. J'ai d'abord essayé de copier la valeur calculée à partir de l'outil de développement du navigateur de l'élément root(html). Mais comme il a calculé, il aurait regardé/travaillé différent sur chaque système.

Pour ceux qui rencontrent une panne de navigateur en essayant d'utiliser l'astérisque * pour réinitialiser le style des éléments enfants, et comme je savais que cela ne fonctionnait pas pour vous, j'ai remplacé l'astérisque "*" par tous les noms de balises HTML à la place. Le navigateur ne s'est pas écrasé; Je suis sur Chrome version 46.0.2490.71 M.

Enfin, il est bon de mentionner que ces propriétés vont réinitialiser le style le style par défaut de l'élément racine le plus haut, mais pas à la valeur initiale pour chaque élément HTML. Donc, pour corriger cela, j'ai pris les styles "user-agent" du navigateur webkit et je l'ai implémenté dans la classe "reset-this".

Télécharger la feuille de style "copier / coller" pour réinitialiser les propriétés css par défaut (UA style)):

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

User-agent style:

les CSS par défaut des navigateurs pour les éléments HTML

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

spécification Css (attention à la spécification)) :

https://css-tricks.com/specifics-on-css-specificity /

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

Non, c'est juste une question de mieux gérer votre structure css.

dans votre cas, je voudrais commander mon css quelque chose comme ceci:

.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}
}

juste expérience.