No me salen estos sencillos ejercicios

Tigervlc · #1 (**permalink**) 08/02/2006, 19:13

Estoy haciendo ejercicios con diferentes selectores, pero estos no me funcionan. En cambio el de descendientes (p.ej: H1 P { ... }) o el de nietos y más lejanos (p.ej: DIV * P) sí que me sale bien. Alguien sabe dónde está el fallo? Son tres los ejercicios. Los dejo bien explicados lo que ocurre en cada uno:

El primero: Con un selector de descendientes con atributo
Qué sucede?: No se colorea de rojo ningún elemento con el atributo href, que esté contenido en P, siendo éste nieto de DIV.

CSS:

Código:

div * p[href] {
     color: Red;
}

HTML:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<link rel="stylesheet" href="selectores3.css" type="text/css">
	<title>Selectores de descendientes</title>
</head>

<body>
     <p>Párrafo hermano anterior de DIV</p>
     <div>
          <p>Párrafo hijo del DIV. <a href="javascript:void(0);">Enlace nieto de DIV</a></p>
          <table>
	    <tr>
	         <td>
                      <p>Párrafo nieto o lejano de DIV. <a href="javascript:void(0);">Enlace bisnieto de DIV</a></p>
	         </td>
	    </tr>
          </table>
     </div>
</body>
</html>

El segundo: Con un selector de hijos
Qué sucede?: No se aplican las reglas del estilo al párrafo hijo de BODY.

CSS:

Código:

BODY > P {
	line-height: 1.3;
	color: #DC143C;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

HTML:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<link rel="stylesheet" href="selectores4.css" type="text/css">
	<title>Selectores de descendientes</title>
</head>

<body>
	<p>No por mucho madrugar amanece más temprano. No por mucho madrugar amanece más temprano. 
	No por mucho madrugar amanece más temprano. No por mucho madrugar amanece más temprano. 
	No por mucho madrugar amanece más temprano. No por mucho madrugar amanece más temprano. </p>
	
	No por mucho madrugar amanece más temprano. No por mucho madrugar amanece más temprano. 
	No por mucho madrugar amanece más temprano. 	No por mucho madrugar amanece más temprano. 
	No por mucho madrugar amanece más temprano. No por mucho madrugar amanece más temprano. 
</body>
</html>

El tercero: Con un selector de hermanos adyacentes
Qué sucede?: No se colorea de rojo el H2 que es hermano adyacente de un H1.

CSS:

Código:

H1 + H2 {
	 color: #FFA500;
}

HTML:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<link rel="stylesheet" href="selectores5.css" type="text/css">
	<title>Selectores de descendientes</title>
</head>

<body>
<h1>Título primero. Hermano primero.</h1>	 
<h2>Título segundo. Hermano adyacente del primero.</h2>
<p>Texto explicativo....</p>
</body>
</html>

Hereje · #2 (**permalink**) 09/02/2006, 01:38

¿Con qué explorador haces estas pruebas?

Tigervlc · #3 (**permalink**) 09/02/2006, 08:07

Perdona la tardanza, es que ayer ya se me hizo muy tarde por la noche.

Utilizo tanto la vista previa del TopStyle como el Internet Explorer 6, y en ninguno funciona. Voy a probar en Firefox o en Netscape a ver pero algo me dice que no saldrá....

Tigervlc · #4 (**permalink**) 09/02/2006, 08:18

Madre mía! En Netscape y Firefox sí que funciona!! Bueno, menos el primer ejercicio, pero posiblemente sea porque la pseudo-clase :link tenga prioridad sobre
div * p[href]
en etiquetas <a>

Pero qué les pasa a los de Microsoft? Se están quedando atrás! Ya tengo más motivos aún para pasarme al Firefox aparte de la estabilidad, código fuente coloreado, mejor gestor de descargas, etc. Y muchísma gente lo ha hecho ya no?

Además, en Firefox creo que ya funcionan las especificaciones de CSS3 no? (como los bloques redondeados y tal).

Jorolo · #5 (**permalink**) 09/02/2006, 12:36

Hola a todos, hola Tigervlc.

Sobre selectores, navegadores y muchas cosas más.