¿Cómo trabajar con los selectores de estado en css3

Hay algunas situaciones en las que el estado dinámico de un objeto es importante para formatearlo en CSS3. El uso de selectores de estado puede ayudar a un usuario a determinar cuando se han alcanzado los objetivos o una característica particular no está disponible (el objeto está desactivado).

Por ejemplo, un objeto puede tener un enlace asociado con él y cuando el usuario hace clic en ese enlace, el estado de los cambios relacionados con “visitada”. La siguiente lista le informa acerca del estado selectores que los documentos utilizan comúnmente.

• :enlazar: Selecciona todos los enlaces no visitados en un documento.

  Es una práctica común combinar selectores de estado con los selectores de etiquetas. Por ejemplo, puede que no desee dar formato a todos los enlaces no visitados en un documento. El vínculo de una la etiqueta más probable es que un formato diferente desde el vínculo de una etiqueta. En consecuencia, se ve comúnmente como selectores de estado un enlace donde el formato afectaría a todos los enlaces de anclaje no visitados.

• :visitó: Selecciona todos los enlaces visitados en un documento.

• :activo: Se selecciona el vínculo que el usuario ha seleccionado en ese momento.

• :vacío: Selecciona un objeto que no tiene contenido.

• :objetivo: Selecciona el blanco de un objeto. Por ejemplo, cuando el usuario hace clic en un vínculo, se selecciona el blanco de ese enlace.

• : Enabled: Selecciona cualquier objeto que está habilitado.

• :discapacitado: Selecciona cualquier objeto que está deshabilitado.

• :comprobado: Selecciona cualquier objeto que está marcada.

• ::selección: Selecciona el contenido que el usuario ha resaltado de alguna manera.

selectores de estado permiten cambiar el aspecto del documento para que coincida con las actividades que el usuario ha realizado. Lo que esto significa es que el documento se vuelve más interactiva, sin necesidad de ningún tipo de codificación de su parte. Este efecto se utiliza en varios de los ejemplos que siguen, de manera que obtendrá mucha práctica trabajar con selectores de estado. El procedimiento siguiente muestra un método para trabajar con selectores de estado.

1. crear el ExternalCSS.HTML archivos y ExternalCSS.CSS y copiarlos a una nueva carpeta.

2. ExternalCSS.HTML abierta.

   Video: MOOC Introducción al Desarrollo Web, parte 2 - 1.10 CSS: selectores básicos (2) - Actívate

3. Escriba el siguiente código después de la existente

   etiqueta en el archivo y guardar los cambios en el disco.

   Video: PSEUDO-CLASSES DE ESTADO (CSS3/HTML5)

   Seleccione uno
   seleccionar dos
   Uno
   Dos

   Esto, añadido código proporciona algunos indicadores de estado para el ejemplo. Al hacer clic en un enlace, el objetivo de ese enlace cambia de estado.

4. ExternalCSS.CSS abierta.

   Video: 9.- Cómo crear una página web - Selectores y Archivos CSS

5. Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.

   :: selección {color: Blueviolet-background-color: Ciruela -} :: - moz-selección {color: Blueviolet-background-color: Ciruela -}: diana {border: sólido-border-width: medio-border-color: rojo-background-color: BlanchedAlmond-}

   Observe el uso del prefacio -moz- especial para el selector segunda :: selección. Esta es una de sus primeras exposiciones a los problemas de compatibilidad del navegador. Con el fin de hacer este trabajo de selección con Firefox, debe agregar esta segunda :: - MOZ-selector de selección con el prefacio.

6. Actualizar la página de prueba.

   Video: Selectores de ID y de CLASE en CSS

7. Seleccionar algunos de los primeros párrafos de texto.

   El color del texto y su cambio de fondo.

8. Haga clic en Seleccionar uno.

   El párrafo que contiene uno cambia su apariencia.

   

9. Haga clic en Seleccionar Dos.

   El párrafo que contiene dos cambia de aspecto. El párrafo que contiene uno vuelve a su aspecto original.