Una mirada a CSS3 El primer selector de tipo estructural
Una cosa que me encanta de CSS3 es la nueva adición de selectores que nos permite identificar elementos específicamente sin confiar en el clase, carné de identidad u otro atributo de elemento, y uno que cubriremos aquí es el siguiente selector, : primero en tipo.
los : primero en tipo selector se dirigirá al primer elemento secundario del elemento especificado, por ejemplo, el fragmento de código a continuación se dirigirá al primer elemento secundario h2 en la pagina web.
h2: primera declaración de estilo / * * /
los : primero en tipo también es igual a : nth-of-type (1), así que en lugar de seleccionar sólo el primero Del tipo, podemos seleccionar el segundo, el tercero y así sucesivamente. El siguiente fragmento apuntará al segundo h2 elemento en la pagina web.
h2: nth-of-type (2) / * declaración de estilo * /
: primero en tipo” vs. “:primer hijo”
Puede parecer que estos dos selectores están haciendo lo mismo, pero ese no es el caso. Veamos la siguiente demostración:
Digamos que tenemos cinco elementos de párrafo envueltos dentro de un div, Me gusta esto:
Párrafo 1
Párrafo 2
Párrafo 3
Párrafo 4
Párrafo 5
Ahora, nos gustaría seleccionar el primer párrafo usando el :primer hijo selector.
p: primer hijo padding: 5px 10px; radio del borde: 2px; fondo: # 8960a7; color: #fff; borde: 1px sólido # 5b456a;
Y como hemos anticipado, el primer párrafo es seleccionado exitosamente..
- : primer niño demo
Sin embargo, cuando nosotros añadir un elemento diferente antes El primer párrafo, digamos un h1, como el fragmento de abajo:
Título 1
Párrafo 1
Párrafo 2
Párrafo 3
Párrafo 4
Párrafo 5
el primer párrafo no será seleccionado, como el primer niño dentro del div es ya no es un párrafo, pero ahora es un h1.
Entonces, esta es la situación donde el : primero en tipo selector viene a resolver el problema.
p: primero del tipo relleno: 5px 10px; radio del borde: 2px; fondo: # a8b700; color: #fff; borde: 1px sólido # 597500;
- : primera demostración de tipo
los “Último” Selector
Donde esta el “primero”, entonces también habrá la “último”.
El reverso de los dos selectores que hemos analizado anteriormente son los siguientes dos selectores; la :último niño y el : último-de-tipo. Básicamente, son los mismos que los dos anteriores, excepto que apuntan a la último hijo del elemento especificado.
Por ejemplo, este fragmento a continuación apuntará al último párrafo dentro de la división.
p: último hijo relleno: 5px 10px; radio del borde: 2px; fondo: # 8960a7; color: #fff; borde: 1px sólido # 5b456a;
- : Demo del último niño
Y este fragmento también apuntará al último párrafo en la misma situación que hemos discutido anteriormente; esta vez el es seguido directamente por un elemento diferente.
p: último-de-tipo relleno: 5px 10px; radio del borde: 2px; fondo: # a8b700; color: #fff; borde: 1px sólido # 597500;
- : Demo del último tipo
El Selectivizr
Como cualquier otra característica nueva en CSS3, estos selectores no son compatibles con los navegadores antiguos, principalmente Internet Explorer 6 a 8, con una excepción para el :primer hijo Selector, ya que se ha agregado desde CSS2.1. Es relativo al :último niño Solo fue agregado en CSS3..
Por lo tanto, si todos los selectores que hemos mencionado aquí son realmente necesarios para su sitio web, puede usar una biblioteca de JavaScript llamada Selectivizr Para emular la funcionalidad de esos selectores CSS3..
El Selectivizr depende de otras bibliotecas de JavaScript para funcionar, como jQuery, Dojo, Prototype y MooTools; y viendo la tabla de comparación en el sitio web oficial, MooTools parece ser capaz de manejar todos los selectores.
Entonces, incluyámoslo junto con el Selectivizr, como sigue:
El comentario condicional anterior se asegurará de que estas bibliotecas solo se carguen en Internet Explorer 8 y más abajo.
Finalmente, puede ver la demostración en los siguientes enlaces y ahora debería funcionar tanto en los navegadores modernos como en los antiguos (IE8 y versiones anteriores). También puede descargar el archivo fuente para un examen más detallado. Disfrutar.
- Manifestación
- Descargar fuente
