Tengo un ejercicio que me esta dando bastantes quebraderos de cabeza y no se como solucionarlo...Seguramente su solución sea bastante sencilla pero yo no la veo. Es un ejercicio de lenguaje de marcas que me pide lo siguiente:
Que cree dos listas, una ordenada y otra desordenada y dentro de cada una de ellas vaya una desordenada. Hasta ahí bien, éste sería el código html que tengo:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Ejercicio</title>
</head>
<body>
<div id="contenedor">
<ol>
<li class="aumento">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="aumento">Suspendisse fringilla libero consectetur massa egestas, vitae condimentum ante finibus </li>
<li class="aumento">Quisque ut risus et dui consequat semper in ac ligula.
<ul>
<li>Suspendisse ultrices tellus ut nunc mollis, ac gravida orci pulvinar.</li>
<li>Integer varius lectus vel est maximus, quis ultrices massa placerat.</li>
</ul>
</li>
</ol>
<ul>
<li>Donec auctor velit ut sapien fringilla maximus.</li>
<li>Nulla a nibh vitae lorem gravida tempor.</li>
<li>Vivamus mollis lorem ut libero lacinia scelerisque.
<ul>
<li>Ut at ex venenatis, iaculis velit pulvinar, auctor enim.</li>
<li>Nam hendrerit magna ut sapien aliquam sodales.</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
El problema surge en cuánto a los estilos me pide que a los elementos de lista ordenada que sean hijos directos tengo que cambiarles el tamaño de letra cuando se pase por encima con el ratón. El código css que he usado es el siguiente:
ol > li:hover {
font-size: 20px;
color: red;
}
El problema es que al usar este código también incluye a la lista desordenada que esta dentro de la lista ordenada y eso no puede ocurrir. He pensado que otro selector puedo escoger para que eso no suceda pero no se me viene nada a la cabeza. Si alguién me puede ayudar sería de agradecer.
Un saludo
