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

Question

Quelle est la différence entre # et . lors de la déclaration d'un ensemble de styles pour un élément et quelle est la sémantique qui entre en jeu pour décider lequel utiliser?

Answer 1

Oui, ils sont différents ...

# est un sélecteur d'identifiant , utilisé pour cibler un élément spécifique unique 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 attribut id = "quoto"
• .foo {} stylisera tous les éléments avec l'attribut class = "foo " " (plusieurs classes peuvent être affectées à un Élément aussi, séparez-les simplement par des espaces, par exemple class = "foo bar" )

Utilisations typiques

En règle générale, vous utilisez # pour styliser quelque chose que vous savez qui n'apparaîtra qu'une seule fois, par exemple des choses comme les diviseurs de disposition de haut niveau tels que les barres latérales, les 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’entête pour les messages d’erreur, vous pouvez créer un style h1.error {} qui ne s’appliquera qu’à < h1 class = " erreur " >

Spécificité

Un autre aspect différent des sélecteurs réside dans leur spécificité - un sélecteur d’identité est considéré comme plus spécifique que le sélecteur de classe. Cela signifie que là où les styles conflit sur un élément, ceux définis avec le plus spécifique Le sélecteur remplacera les sélecteurs moins spécifiques. Par exemple, étant donné < div id = & sidebar " class = & box; > toutes les règles pour #sidebar avec règles de conflit en conflit pour .box

En savoir plus sur les sélecteurs CSS

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

EDIT: On dirait que Selectutorial aurait pu aller sur le grand site Web dans le ciel, alors essayez ceci lien d’archivage à la place.

Answer 2

Le # signifie qu'il correspond au id d'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 . Par conséquent, si vous avez plusieurs éléments nécessitant un style spécifique, vous devez utiliser un nom de classe.

Answer 3

Le point (. ) désigne un nom classe , tandis que le hachage ( # ) désigne un élément doté d'un id 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 ayant cet identifiant particulier.

Nom de la classe:

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

Answer 4

Il convient également de noter que dans la cascade , un Le sélecteur> id ( # ) est plus spécifique que le sélecteur ab (. ). Par conséquent, les règles de l’instruction id remplaceront celles de la déclaration de classe.

Par exemple, si les deux instructions 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 color: blue aurait priorité sur la règle color: red .

Answer 5

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

Un id doit être unique, mais vous pouvez utiliser le même identifiant pour définir des 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 par un espace ...

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

Ce qui vous permet d'avoir un style commun dans .menu avec des styles spécifiques utilisant .main.menu et .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

Comme à peu près tout le monde l’a déjà dit:

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

La différence fondamentale entre vous est que vous pouvez réutiliser une classe sur votre page à plusieurs reprises, alors qu'un ID peut être utilisé une fois. C’est, bien sûr, si vous vous en tenez aux normes WC3.

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

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

Answer 7

.class cible l'élément suivant:

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

#class cible l'élément suivant:

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

Notez que l'identifiant DOIT être unique dans tout le document, bien qu'un nombre quelconque d'éléments puisse partager une classe.

Answer 8

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

#green {color: green}

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

Answer 9

Voici mon approche de l'explication des règles .style et #style font partie d'une matrice. que s'ils ne sont pas dans le bon ordre, ils peuvent se substituer l'un à l'autre ou provoquer des conflits.

Voici le line up.

Matrice

#style 0,0,1,0 id

.style 0,1,0,0 class

si vous souhaitez remplacer ces deux options, vous pouvez utiliser < style > < / style > qui a un niveau de matrice ou 1,0,0,0. Et la 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'identifiant # ne peut être utilisé qu'une seule fois dans une page.