web-dev-qa-db-fra.com

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

csscss-selectors
200
Sam152

Oui, ils sont différents ...

# est un sélecteur d'identifiant , utilisé pour cibler un élément spécifique single 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 {} appellera l'élément single déclaré avec un attribut id="foo"
  • .foo {} va styler tous éléments avec un attribut class="foo" (vous pouvez également affecter plusieurs classes à un élément, séparez-les simplement par des espaces, par exemple class="foo bar")

Utilisations typiques

De manière 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 là où le style est répété, par ex. 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’appliquerait qu'à <h1 class="error">

Spécificité

Un autre aspect de la spécificité des sélecteurs réside dans leur spécificité: un sélecteur d'identifiant 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 sélecteur plus spécifique remplacent les sélecteurs moins spécifiques. Par exemple, étant donné <div id="sidebar" class="box"> aucune règle pour #sidebar avec des règles de conflit en conflit pour .box

En savoir plus sur les sélecteurs CSS

Voir Selectutorial pour plus d'améliorations 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: On dirait que Selectutorial aurait pu aller sur le grand site Web dans le ciel, alors essayez ceci lien archive à la place.

320
Paul Dixon

Le # signifie qu'il correspond à la 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, donc si vous avez plusieurs éléments nécessitant un style spécifique, vous devez utiliser un nom de classe.

27
nickf

Le point (.) signifie un nom classe tandis que le hachage (#) signifie un élément avec un attribut spécifique id. 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 portant cet identifiant 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>
10
tvanfosson

Il convient également de noter que dans le cascade , un sélecteur id (#) est plus spécifique que le sélecteur ab (.). Par conséquent, les règles de l'instruction id remplacent 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 color: blue remplacera la règle color: red .

7
Jans Carton

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 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 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
{ ... }
5
Peter Boughton

Comme à peu près tout le monde a déjà déclaré:

Un point (.) indique un 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 avec 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.

4
Anders

.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, alors qu'un nombre quelconque d'éléments peut partager une classe.

4
Bobby Jack

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

#green {color: green}

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

2
tehvan