Voici une page et sa feuille de style

<div id="menu">
  <p class="actif">Accueil</p>
  <p>Cours</p>
  <a class="actif" href="/tp">TP</a>
</div>
<p class="actif">Nouveautes</p>

p        { color: gray; }
.actif   { color: red; }
#menu p  { font-weight: bold; }
div a.actif { text-decoration: underline; }
span.actif  { color: green; }

1.

Trois raisonnements suffisent à tout obtenir :

• Rouge contre gris. Les deux premières règles visent le même paragraphe. Un sélecteur de classe l'emporte sur un sélecteur de balise : .actif gagne, quel que soit l'ordre dans le fichier.
• Le gras. #menu p se lit « tout p situé à l'intérieur de l'élément d'identifiant menu ». Le lien <a> n'est pas un p : il n'est pas mis en gras. Le dernier paragraphe est bien un p, mais il est hors du div : pas de gras non plus.
• Le soulignement. div a.actif se lit « un <a> de classe actif situé dans un <div> » : seul le lien correspond.

Contrôle : un lien est de toute façon souligné par défaut dans un navigateur. La règle ne change donc rien à l'œil ici — ce qui est une bonne raison de ne pas se fier à l'apparence pour vérifier qu'un sélecteur fonctionne, et de regarder l'inspecteur du navigateur.

2. span.actif ne s'applique à rien : la page ne contient aucun <span>. Ce n'est pas une erreur au sens strict — le navigateur l'ignore sans rien signaler, c'est là toute la difficulté. Une règle CSS qui ne désigne aucun élément ne provoque jamais de message : elle est simplement sans effet. C'est la différence de fond avec un langage de programmation, où une instruction inatteignable finit par se remarquer.

Piège : lire div a.actif comme « un div, puis un a, puis un élément de classe actif », soit trois éléments. L'espace signifie « à l'intérieur de » ; l'absence d'espace, dans a.actif, signifie « le même élément ».