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;
}
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;
}
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;
}
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>