En CSS, quelle est la différence entre "." et "#" lors de la déclaration d'un ensemble de styles?

Quelle est la différence entre #et .quand déclarer un ensemble de styles pour un élément et quelles sont les sémantiques qui entrent en jeu pour décider lequel utiliser?

Oui, ils sont différents ...

#est un sélecteur d'identifiant , utilisé pour cibler un seul élément spécifique avec un identifiant unique, mais. est un sélecteur de classe utilisé pour cibler plusieurs éléments avec une classe particulière. Pour le dire autrement:

• #foo {}stylisera l' élément unique déclaré avec un attributid="foo"
• .foo {}va styliser tous les éléments avec un attribut class="foo"(vous pouvez aussi avoir plusieurs classes assignées à un élément, il suffit de les séparer avec des espaces, par exemple class="foo bar")

Utilisations typiques

De manière générale, vous utilisez # pour styliser quelque chose que vous savez n'apparaître qu'une seule fois, par exemple, des éléments comme la mise en page de haut niveau divise ces barres latérales, zones de bannière, etc.

Les classes sont utilisées lorsque le style est répété, par exemple, si vous dirigez une forme spéciale d'en-tête pour les messages d'erreur, vous pouvez créer un style h1.error {}qui ne s'appliquerait qu'à<h1 class="error">

Spécificité

Un autre aspect où les sélecteurs diffèrent est leur spécificité - un sélecteur d'identifiant est réputé être plus spécifique qu'un sélecteur de classe. Cela signifie que lorsque les styles entrent en conflit sur un élément, ceux définis avec le sélecteur plus spécifique remplaceront les sélecteurs moins spécifiques. Par exemple, étant donné <div id="sidebar" class="box">toutes les règles pour #sidebarremplacer les règles conflictuelles pour.box

En savoir plus sur les sélecteurs CSS

Voir Selectutorial pour plus d'amorces sur les sélecteurs CSS - ils sont incroyablement puissants, et si votre conception est simplement que "# est utilisé pour les DIV", vous feriez bien de lire exactement comment utiliser CSS plus efficacement.

EDIT: Il semble que Selectutorial soit allé sur le grand site Web dans le ciel, alors essayez plutôt ce lien d'archive .

Le #signifie qu'il correspond à la idd'un élément. le. signifie le nom de la classe:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Notez que dans un document HTML, l'attribut id doit être unique , donc si vous avez plus d'un élément nécessitant un style spécifique, vous devez utiliser un nom de classe.

Le point ( .) signifie un nom de classe tandis que le hachage ( #) signifie un élément avec un identifiant spécifique attribut . La classe s'appliquera à tout élément décoré avec cette classe particulière, tandis que le style # ne s'appliquera qu'à l'élément avec cet id particulier.

Nom du cours:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Élément nommé:

<style>
   #name { ... }
</style>

<div id="name"></div>

Il convient également de noter que dans la cascade , un sélecteur id ( #) est plus spécifique qu'un .sélecteur ab ( ). Par conséquent, les règles de l'instruction id remplaceront les règles de l'instruction class.

Par exemple, si les deux déclarations suivantes:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

sont appliqués au même élément HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

la règle couleur: bleu aurait priorité sur la règle couleur: rouge .

Quelques extensions rapides sur ce qui a déjà été dit ...

Un iddoit être unique, mais vous pouvez utiliser le même identifiant pour rendre différents styles plus spécifiques.

Par exemple, étant donné cet extrait HTML:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Vous pouvez appliquer différents styles avec ceux-ci:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Une autre chose utile à savoir: vous pouvez avoir plusieurs classes sur un élément, en les délimitant dans l'espace ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Ce qui vous permet d'avoir un style commun .menuavec des styles spécifiques en utilisant .main.menuet.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class cible l'élément suivant:

<div class="class"></div>

#class cible l'élément suivant:

<div id="class"></div>

Notez que l'ID DOIT être unique dans tout le document, tandis que n'importe quel nombre d'éléments peuvent partager une classe.

Comme presque tout le monde l'a déjà dit:

Un point ( .) indique une classe et un hachage ( #) indique un ID .

La différence fondamentale entre les deux est que vous pouvez réutiliser une classe sur votre page encore et encore, tandis qu'un ID peut être utilisé une fois. C'est, bien sûr, si vous vous en tenez aux normes WC3.

Une page sera toujours affichée si vous avez plusieurs éléments avec le même ID, mais vous rencontrerez des problèmes si / lorsque vous essayez de mettre à jour dynamiquement lesdits éléments en les appelant avec leur ID, car ils ne sont pas uniques.

Il est également utile de noter que les propriétés ID remplaceront les propriétés de classe.

Le # est un sélecteur d'identifiant. Il ne correspond qu'aux éléments avec un identifiant correspondant. La règle de style suivante correspondra à l'élément qui a un attribut id avec une valeur "verte":

#green {color: green}

Voir http://www.w3schools.com/css/css_syntax.asp pour plus d'informations

Voici mon approche pour expliquer les règles .style et #stylefont partie d'une matrice. que s'ils ne sont pas dans le bon ordre, ils peuvent se remplacer ou provoquer des conflits.

Voici le line up.

Matrice

#style 0,0,1,0 id

.style 0,1,0,0 class

si vous voulez remplacer ces deux, vous pouvez utiliser <style></style>un niveau de matrice ou la 1,0,0,0. requête @media remplacera tout ce qui précède ... Je ne suis pas sûr de cela, mais je pense que le sélecteur d'ID #ne peut être utilisé qu'une seule fois dans une page.