Quelle est la différence entre les deux. et # dans un fichier css?
Dans les exemples css, j'ai vu des règles définies commençant par un . et certaines commençant par # - parfois elles sont mélangées dans le même fichier. Quelle est la différence entre ces règles:
h1 { font-size:18pt;}
.new-alerts { font-size:11pt; font-weight:bold;}
#old-alerts { position:relative; font-size:10pt; }
Sont-ils référencés différemment sur la page html? Est-ce la façon dont les propriétés sont héritées?
4 réponses
. fait référence à une classe. <span class="one" /> peut être sélectionné avec .one.
# fait référence à un ID. <span id="one" /> peut être sélectionné avec #one.
Vous devriez utiliser des classes quand il pourrait y avoir plus d'un élément donné, et des ID quand vous savez qu'il n'y en aura qu'un. #navigation-bar utiliserait un ID car vous n'aurez qu'une seule barre de navigation dans votre mise en page, mais .navigation-link utiliserait un nom de classe car vous aurez plusieurs liens de navigation. (Il serait préférable d'utiliser #navigation-bar a:link pour obtenez les liens de navigation, mais vous avez mon point.)
La dot . est un sélecteur de classe, le hachage/livre/dièse # sélectionne par un ID:
<style>
.foo { ... }
#bar { ... }
</style>
...
<p class='foo'>Foo</p>
<p id='bar' class='baz'>Bar</p>
Les Id doivent être uniques tout au long d'un document, les classes ne doivent pas l'être. C'est en fait la principale différence. Il y a quelques choses à noter en ce qui concerne les scripts, mais ceux-ci ne sont généralement pas d'un intérêt particulier lors du style.
En Outre, un élément peut appartenir à plusieurs classes:
<p class="foo bar baz">
Et comme vu ci-dessus, les classes et les ID sont ne s'excluent pas mutuellement.
. est une classe et peut être réutilisée plusieurs fois et pour différents éléments
# est un identifiant et ne doit être utilisé qu'une seule fois sur chaque page.