Comment convertir une classe CSS en ID?

Question

c'est le code CSS ...

.breadcrumb { 
    font-size: 10px; 
    background-color: #006600; 
    padding: 0px 2px 2px 2px; 
    text-align: center; 
    color: #FFFFFF; 
} 

.breadcrumb a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

.breadcrumb a:visited, .breadcrumb a:active { 
    color: #FFFFFF; 
} 

.breadcrumb a:hover { 
    text-decoration: underline; 
} 

et c'est le code que je utilise pour afficher un fil d'Ariane ...

<p class="breadcrumb">Breadcrumb PHP code goes here</p> 

Je veux le code CSS à modifier pour que je peut utiliser id au lieu de la classe, comme dans:

<p id="breadcrumb">Breadcrumb PHP code goes here</p> 

Quelqu'un peut-il aider?

Answer 1

Modifiez le . dans votre CSS à #. Cela dit, vous devez vous assurer qu'il n'y aura jamais qu'une seule instance de ce p sur votre page à un moment donné si vous utilisez un sélecteur d'identifiant.

Answer 2

Tout ce que vous avez à faire est de changer '.' à '#'. Comme @Demian Brecht a dit, vous devriez vous assurer que vous avez seulement un élément sur votre page qui a id = "breadcrumb". Vous feriez peut-être mieux de vous en tenir à une classe à moins que vous ne soyez absolument certain qu'il n'y en aura qu'un seul.

Les sélecteurs de classes CSS n'ont pas beaucoup d'impact sur les performances de la page. En général, j'utilise uniquement des ID pour les éléments de disposition, puis j'essaie de conserver tous les autres sélecteurs en tant que classes. Cela vous aidera quand vous voudrez réutiliser les styles sur plusieurs éléments. Cependant, les ID augmentent considérablement les performances pour les scripts, mais si vous recherchez une classe dans le contexte d'une balise qui a un ID, la performance est encore assez bonne.

Voici comment vous le modifieriez.

#breadcrumb { 
    font-size: 10px; 
    background-color: #006600; 
    padding: 0px 2px 2px 2px; 
    text-align: center; 
    color: #FFFFFF; 
} 

#breadcrumb a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#breadcrumb a:visited, #breadcrumb a:active { 
    color: #FFFFFF; 
} 

#breadcrumb a:hover { 
    text-decoration: underline; 
}