Deux tailles de police différentes une ligne css

Question

Comment puis-je styliser une ligne de texte dans une barre de navigation avec deux tailles de police différentes?

Dans mon html je:

<nav> 
    <ul> 
     <li><a heref="#">Home</a></li> 
     <li><a heref="#">About</a></li> 
     <li><a heref="#">Products</a></li> 
     <li><a heref="#">Stockists</a></li> 
     <li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li> 
     <li><a heref="#">Contact</a></li> 
     </ul> 
</nav> 

où je

<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>

Je veux être Blog 35px et (une pincée de psalt) pour être dire 15px. J'ai utilisé des sélecteurs d'enfants pour cibler chacun des éléments de navigation en fonction de la couleur, de la taille de la police, etc. mais je ne sais pas comment cibler deux éléments séparés sur cette ligne dans mon css.

Answer 1

Juste .nav ul li a et .nav ul li a em. Si c'est ce que vous cherchez

Answer 2

Ajoutez un <span> à votre HTML et donnez-lui une classe qui vous permettra de le cibler avec CSS. Par exemple:

<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li> 

et CSS:

nav li .big { 
    font-size: 35px; 
} 

Vous avez déjà une balise <em> autour du texte restant (ou vous pouvez cibler nav li a avec une taille de texte « par défaut »), de sorte que c'est le seul HTML vous devrez ajouter. Gardez juste à l'esprit que vous devriez être cohérent.

Answer 3

Sur une autre note.

Répondez à ma recherche google pour d'autres situations.

La définition ci-dessous classe CSS

font.yellow { 
    color:yellow 
} 

fonctionne de manière transparente lorsqu'ils sont utilisés comme:

<p class"blue"> 
    blue text here 
    <font class="yellow">yellow text</font> 
    still blue text here 
</p>