SOLO CSS HIJO
Ejemplo 01:
Comenzamos el archivo de código HTML dentro del código Visual Studio con la etiqueta de apertura principal HTML seguida de la apertura de una etiqueta de cabeza adyacente a la apertura de la etiqueta de título. Esta etiqueta de título contiene el título de esta página y la etiqueta de título está cerrada aquí. Luego, tenemos una etiqueta de estilo CSS principal y la etiqueta del cuerpo para agregar elementos a la página HTML junto con algo de estilo. Primero necesitamos comprender el cuerpo del HTML. Para esto, utilizamos un encabezado simple del tamaño más grande en la parte superior de la página HTML, I.mi. H1, que muestra que este es un ejemplo de un desplazamiento de clase solo para niños. Luego, usamos el elemento simple "div" para crear una nueva división en la página web HTML seguida de su etiqueta infantil, yo.mi. etiqueta. Esta etiqueta de etiqueta usa una oración simple en ella.
Ahora, el elemento "etiqueta" es la única etiqueta dentro de la etiqueta "div". Se tomaría como un compensado único en este caso. Tenemos otro elemento Div utilizado después de esto dentro de la página HTML. Este elemento div contiene dos etiquetas o elementos más dentro de él. Su primera etiqueta es la etiqueta SPAN y la otra es la etiqueta de etiqueta; Ambos contienen algunos datos de texto en él. Dado que esta etiqueta Div tiene dos hijos, ni un solo hijo se tomaría como un desplazamiento de "único hijo" para el estilo. Por último, tenemos una nueva etiqueta de párrafo con su única etiqueta de niños "etiqueta" dentro de ella. Ahora, esta etiqueta de etiqueta del elemento de párrafo también se tomaría como el único hijo de su padre y se diseña en consecuencia. El elemento corporal se completa aquí.
Tomemos una apariencia con el diseño de esta página HTML. Dentro de la etiqueta de estilo CSS, usamos el elemento "Etiqueta" con el compensación de clase "Only-Child" para aplicar algunos estilos a todos los elementos infantiles de etiquetas/elementos particulares que no contienen ningún otro niño dentro de ellos. En otras palabras, el estilo se aplica a los elementos infantiles que no tienen hermanos. Utilizamos el fondo de la propiedad para agregar el fondo de color verde para este niño en particular. La propiedad de fuente de fuente contiene más de 1 valor para el texto contenido por el niño en particular y su tamaño de fuente es extra grande. El color para el texto de las etiquetas infantiles "etiqueta" es de color rosa claro según el color de la propiedad. Se completa la etiqueta de estilo al lado del elemento de la etiqueta de la cabeza. Cerremos la etiqueta HTML después de la etiqueta del cuerpo y guardemos este código. Intente ejecutarlo con el navegador Chrome para ver la salida para el único desplazamiento de clase infantil.
La siguiente salida que se muestra muestra un encabezado simple en la parte superior seguido de las dos secciones claras "Div" y un párrafo. Las secciones que se muestran en el fondo de color verde demuestran el único hijo de la sección "Div", por lo tanto, se diseñan en consecuencia a través del único desplazamiento del hijo para el elemento de la etiqueta. La línea después del primer elemento infantil representa la segunda sección "div" con dos hijos, el tramo y la etiqueta, en la misma línea. Mientras que el segundo niño diseñado en el fondo verde es parte de un elemento de párrafo.
Ejemplo 02:
Comenzamos este script HTML con el mismo formato HTML de códigos: comience con la etiqueta HTML seguida de la etiqueta de cabeza, la etiqueta del cuerpo, la apertura y el cierre. El cuerpo del HTML contiene un rumbo de tamaño 1, el rumbo más grande del HTML. Comenzamos una lista ordenada dentro de nuestra etiqueta de cuerpo HTML. Este elemento de lista se agrega con la etiqueta de lista "OL". Esta lista ordenada contiene un total de 4 elementos de la lista numerada dentro del uso de etiquetas de lista "Li". La primera lista numerada contiene una sola lista desordenada dentro de ella con un elemento de lista único que se toma como su único hijo. El elemento de la segunda lista de la lista principal ordenada contiene otra lista desordenada dentro de ella. Esta lista sin ordened interna contiene tres elementos de la lista dentro de él con el uso de las etiquetas "Li". El tercer elemento de la lista de la lista ordenada principal contiene un elemento de la lista única dentro de él con la etiqueta de lista inordenada interna seguida de la etiqueta "Li".
El último elemento de la lista de la lista ordenada principal contiene otro elemento de lista desordenado, "UL". Este elemento de lista desordenado contiene un total de tres elementos de la lista dentro de él utilizando las etiquetas "Li". El principal ordenado se cierra después del uso de los 4 elementos de la lista principal en él. El cuerpo de nuestra página HTML se completa aquí.
Echemos un vistazo al diseño de toda esta página HTML. Utilizamos las dos etiquetas de palabras clave "Li" dentro de la etiqueta de estilo para diseñar todos los elementos de la lista interior de los 4 elementos de la lista principal. La propiedad de tipo de estilo de lista para los elementos de la lista interna se especifica como un estilo de "círculo". Por otro lado, usamos la única clase de compensación de hijos para los elementos de la lista para agregar algunos estilos a los únicos elementos de la lista que son el único hijo de sus respectivos padres y no tienen ningún otro hijo o hermano. Especificamos el color de texto para esos elementos de la lista de niños como rojo con diferentes usos de la familia de fuentes. Además, usamos el tipo de estilo de lista cuadrado mediante el uso del "tipo de estilo de lista". El estilo de este código está finalizado. Guardemos y ejecutemos nuestro código para ver la salida.
La salida para este código muestra un encabezado único seguido de la lista ordenada de 4 elementos de la lista numerados. Los elementos de lista desordenados de estos elementos de la lista ordenados se resaltan en el color de texto rojo con la bala de estilo de lista cuadrada. El resto de los elementos de la lista desordenados se muestran en el estilo de bala Circle.
Conclusión
Este artículo ha establecido la marca para demostrar el uso de la clase de compensación única en el estilo CSS para diseñar los únicos elementos de una página HTML que son un solo hijo de su elemento principal. Para este propósito, utilizamos un total de 2 breves ejemplos en nuestras secuencias de comandos HTML para demostrar la aplicación de esta clase de compensación a tales elementos infantiles. El primer ejemplo contiene el uso de esta compensación en algunas secciones "div", mientras que el otro ejemplo lo usa para diseñar los elementos de la lista desordenados para una lista numerada.