2009-06-10 5 views
15

ma question est s'il est possible de réinitialiser les styles css (beaucoup sur eux) pour un seul div et tous les éléments qui sont contenues dans ce div.réinitialiser plusieurs styles CSS pour un seul élément div

Je demande, parce que j'ai trouvé ce tutoriel pour un shoutbox jquery qui a son propre fichier css . Je ne peux pas simplement copier les styles sur mon propre fichier css, car il va bousiller le reste de la page où les styles sont déjà définis.

J'ai pensé à l'aide d'un divwrapper et d'appliquer toutes ces réinitialisations seulement à celui-là. Je ne suis pas sûr s'il est possible

Je sais que cette façon

#divwrapper td{ set styles } 

@CHARSET "UTF-8"; 
/******* GENERAL RESET *******/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td { 
border:0pt none; 
font-family:inherit; 
font-size: 100%; 
font-style:inherit; 
font-weight:inherit; 
margin:0pt; 
padding:0pt; 
vertical-align:baseline; 
} 

merci, Richard

+0

duplication possible de [Réinitialiser/supprimer les styles CSS pour l'élément uniquement] (http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only) –

+0

Pas un doublon, mais certainement lié . – Shog9

Répondre

4

si pratique que vous pouvez mettre tout le contenu d'être « reset » dans un iframe. Le contenu iframe n'héritera rien.

+0

Comme ?? Et dans le css ... # shoutbox {reset styles} Vous dites si pratique, est-il un inconvénient de le faire comme ça –

+0

non, iframe doit utiliser un href et pointer vers une autre page html (avec sa propre tête, le corps Le contenu entre les balises est un contenu alternatif pour les navigateurs qui ne supportent pas les cadres (à peu près aucun) – SpliFF

+0

L'inconvénient des iframes est que tout est vraiment dans un autre document et que vous ne pouvez pas déplacer le contenu iframe Google peut traiter le contenu iframe comme une page indépendante L'avantage est que vos styles JS/CSS ne vont pas se contracter – SpliFF

12

Essayez ceci:

div.foo, div.foo * 
{ 
    // your styles 
} 

qui appliquera les styles à la div avec classe "foo" et tous ses descendants. L'étoile (*) est connue sous le nom universal selector, et sans surprise, sélectionne des éléments de tout type.

Ou uniquement pour les enfants immédiats:

div.foo, div.foo > * 
{ 
    // your styles 
} 
+0

Je crois qu'il sélectionne tous les descendants [ou enfants] plus le contenu de la div – tschaible

+0

oh, la virgule sépare les sélecteurs, a obtenu. Je vais essayer que –

+1

l'espace après la virgule importe – SpliFF

2

Comme mentionné précédemment @Noldorin, vous voulez un sélecteur qui sélectionne tous les descendants (ou les enfants) à l'aide du sélecteur universel.

Pour plus d'informations sur les sélecteurs, consultez la documentation du W3C. info sélecteur CSS2 est here

Exemple de code (j'ai choisi d'utiliser un sélecteur par ID, par opposition à la classe) pour illustrer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>CSS Reset</title> 

<style> 
.red{ 
    color: red; 
} 
.blue{ 
    color: blue; 
} 
.green{ 
    color: green; 
} 

#reset *{ 
    color: black; 
} 

#resetc > *{ 
    color: black; 
} 

</style> 
</head> 
<body> 
<h1>With Descendant Reset Style</h1> 
<div id="reset"> 
    <div class="red">Red</div> 
    <p class="green">Green<span class="blue">Blue</span></p> 
</div> 

<h1>With Child Reset Style</h1> 
<div id="resetc"> 
    <div class="red">Red</div> 
    <p class="green">Green<span class="blue">Blue</span></p> 
</div> 

<h1>Without Reset Style</h1> 
<div> 
    <div class="red">Red</div> 
    <p class="green">Green<span class="blue">Blue</span></p> 
</div> 
</body> 
</html> 
+0

+1 merci beaucoup! –

Questions connexes