2. Pseudo-clases y pseudo-elementos
A.: El selector descendiente detrás del flotador
Ejemplo
| A: Hover Span { Color: #0f0; } |
describir
Un elemento puede ser posicionado por un selector detrás del: pseudo-clase flotante, al igual que un selector descendiente. En el ejemplo anterior, cuando el mouse se cierne, se cambiará el color del texto en el elemento de tramo en el elemento A.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
B. Pseudocategoría de cadena
Ejemplo
| A: First-Child: Hover { Color: #0f0; } |
describir
Las pseudo-clases se pueden encadenar para reducir la selección de elementos. El ejemplo anterior ubicará la primera etiqueta en cada elemento principal y aplicará el psudoclase P Hover a él.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
C. Entre los elementos no destacados: flotante
Ejemplo
| Div: Hover { Color: #F00; } |
describir
El: la pseudo-class del flotador se puede aplicar al estado de cierre de cualquier elemento, no solo la etiqueta A.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
D .: pseudo-clase de primer hijo
Ejemplo
| Div Li: Primer hijo { fondo: azul; } |
describir
La clase pseudomodificada localiza el primer elemento secundario del elemento principal de cada elemento especificado.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
Insectos
En IE7, si el primer elemento infantil que se encuentra tiene comentarios HTML antes, la pseudo-clase de primer hijo no será válido
E.: pseudo-clase de enfoque
Ejemplo
| A: Focus { borde: 1px rojo sólido; } |
describir
Esta pseudo clase localiza todos los elementos con el enfoque del teclado.
Apoyo
| IE6 No IE7 No IE8 Sí |
F ,: antes y: después de las pseudo-clases
Ejemplo
| #box: antes { Contenido: "Este párrafo está frente a la caja"; } #box: después { Contenido: "Este párrafo está detrás de la caja"; } |
describir
Estos dos pseudo-elementos agregan el contenido generado antes y después del elemento especificado, y lo usan junto con el atributo de contenido.
Apoyo
| IE6 No IE7 No IE8 Sí |
3. Soporte de atributos
A. El tamaño real generado por posición
Ejemplo
| #caja { Posición: Absoluto; arriba: 0; Derecha: 100px; Izquierda: 0; Abajo: 200px; fondo: azul; } |
describir
La definición de los valores de arriba, derecha, inferior e izquierda a elementos absolutamente posicionados dará el tamaño real (ancho y altura) del elemento, aunque no hay configuración para hacer los valores de ancho y altura.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
B. Min-altura y mínimo
Ejemplo
| #caja { Min-altura: 500px; Min-Width: 300px; } |
describir
Estas dos propiedades especifican los valores mínimos del ancho y la altura del elemento, lo que permite que un cuadro sea mayor que el valor mínimo especificado, pero no más pequeño. Se pueden usar juntos o por separado.
Apoyo
| IE6 No IE7 Sí IE8 Sí |
C, Max-Alto y Max-Width
Ejemplo
| #caja { Max-aguja: 500px; MAX-ANCHO: 300PX; } |
describir
Estas dos propiedades especifican los valores máximos de la altura y el ancho del elemento, lo que permite que un cuadro sea más pequeño que el valor máximo especificado, pero no más grande. También se pueden usar simultáneamente o individualmente.
Apoyo
| IE6 No IE7 Sí IE8 Sí |