web-dev-qa-db-fra.com

Comment isoler une div des styles CSS publics?

j'ai du code par exemple ici en html

<html>
 <body>
  <img src='an image source'/>
  <h1>Hi it's test</h1>
  <div id='mydiv'>
    <img src='an image source'/>
    <h1>Hi it's test</h1>
  </div>
 </body>
</html>

si j'ai utilisé le code CSS suivant pour le styler:

img{
   width:100px;
   height:100px;
}
h1{
   font-size:26px;
   color:red;
}

la question est la suivante: comment puis-je empêcher et isoler les balises à l'intérieur de la balise mydiv div du style par le style des balises publiques?

htmlcsscss3
46
Med7at

CSS en cascade et d'héritage de niveau 3 introduit la propriété abrégée all et le mot clé unset , qui, ensemble, vous permettent de réaliser cela facilement.

Par exemple, si un auteur spécifie all: initial sur un élément, il le fera bloquer tout l'héritage et réinitialiser toutes les propriétés, comme s'il n'y avait pas de règles apparaissant dans les niveaux auteur, utilisateur ou agent utilisateur de la cascade.

Cela peut être utile pour l'élément racine d'un "widget" inclus dans un page, qui ne souhaite pas hériter des styles de la page externe . Notez cependant que tout style "par défaut" appliqué à cet élément (tel que Tel que, par exemple, display: block de la feuille de style UA sur des éléments de bloc, tel que Comme <div>) sera également supprimé.

Vous devrez appliquer all: initial à votre div et all: unset à ses descendants:

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

Vous souhaiterez peut-être utiliser une classe sur votre div au lieu d'un identifiant, de sorte que les règles que vous écrivez pour styliser ses descendants ne devront pas correspondre ni dépasser la haute spécificité utilisée dans cette règle.

Pour plus de sécurité, vous pouvez également bloquer les styles sur les descendants potentiels de pseudo-éléments:

#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}

Pour une prise en charge plus étendue du navigateur, vous pouvez également tenter manuellement de faire ce que all fait en définissant toutes les propriétés CSS connues (n’oubliez pas les versions préfixées):

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  alignment-baseline: initial;
  animation: initial;
  backface-visibility: initial;
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

Vous pouvez encourager le navigateur à prendre en charge la propriété abrégée all et suivre son adoption à l'aide des liens suivants:

Les informations de support du navigateur actualisées pour la propriété abrégée all sont disponibles ici .

91
jaredjacobs

Vous ne pouvez pas techniquement, c'est ainsi que CSS est supposé fonctionner. Si un style est défini pour la balise Div dans votre feuille de style, il sera appliqué à tous les éléments div.

Peu de choses que vous pouvez essayer sont ne mettez pas de style avec le nom de balise à la place, donnez le nom de classe et donnez une déclaration de style à classe. afin que vous puissiez vous assurer que tous les styles iront.

OU. si vous voulez que certaines balises Div n'aient pas le style alors que d'autres Div ont. vous pouvez toujours le réinitialiser, donner un nom de classe ou un identifiant différent et réinitialiser les déclarations de style

10
Kamal

Une chose qui pourrait être utile est le CSS direct child selector , qui est disponible dans tous les navigateurs, y compris IE7 +. Cela vous permet d'appliquer un style qui ne tombe pas dans les cheveux des enfants. Par exemple, dans votre code, vous pouvez utiliser ce CSS:

body > img {
  width:100px;
  height:100px;
}
body > h1 {
  font-size:26px;
  color:red;
}

Et ce CSS ne s'appliquerait qu'aux éléments directement sur l'élément BODY.

1
jpsimons

Ancienne question, mais les choses ont un peu changé depuis la réponse acceptée. Il existe maintenant un mot-clé recommandé par le CSSWG appelé revert qui conviendrait mieux que initial et unset pour résoudre ce problème, car il réinitialise la propriété d'un élément à la valeur définie dans feuille de style de l'agent utilisateur plutôt que la valeur initiale de la propriété, quel que soit l'élément sur lequel elle est utilisée. Ainsi, par exemple, un div à l'intérieur de #mydiv aura son affichage défini sur block comme on peut s'y attendre et non pas inline.

Vous devez faire ceci:

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

Malheureusement, revert n'est pris en charge par aucun navigateur autre que Safari (pour Mac et iOS) au moment de la rédaction.

Il y a aussi autre chose à prendre en considération concernant la réponse acceptée. Si vous souhaitez styliser quoi que ce soit à l'intérieur de #mydiv, vous devez le faire avec un sélecteur au moins aussi spécifique que celui que vous avez utilisé pour annuler la réinitialisation ou annuler tout, sinon cette règle sera remplacée par cette règle, même si elle vient après. le CSS.

Vous devez donc faire quelque chose comme ceci (notez le #mydiv qui renforce la spécificité des règles):

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.
0
benface