Tu imagen apenas se distingue, y el código está mal hecho (y de paso te aclaro que counter-increment y counter-reset ya vienen de la especificación css2.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> /*<![CDATA[*/
/*** INICIO LISTA ORDENADA ***/
#listaordenada ol {
counter-reset: item;
}
#listaordenada li {
display: block;
}
#listaordenada li:before {
counter-increment: item;
content: counters(item, ".") ".";
}
/*]]>*/
<li><span class="resaltado">Sistemas Compatibles
</span> --
> Son sistemas que poseen una o más soluciones.
<p>Dentro de estos distinguimos dos casos:
</p>
<li><span class="resaltado">Compatibles Determinados
</span> --
> Poseen una única solución.
</li> <li><span class="resaltado">Compatibles Indeterminados
</span> --
> Poseen Infinitas soluciones.
</li>
<p>Y luego tenemos los sistemas:
</p> <li><span class="resaltado">Sistemas Incompatibles
</span> --
> No poseen solución alguna.
</li>
Compará.
Finalmente te diría que si vas a poner descripciones entre los items, se pierde un poco el sentido de las listas anidadas
Saludos