Selectores de CSS vecinos. Libro de texto CSS - Selectores CSS vecinos

Buenas tardes, Estimados colegas, hoy exploraremos con ustedes dos adicionales. selectorllamada subsidiarias CSS y selectores adyacentes. En mayor medida, es posible hacerlo sin ellos, sin embargo, para su desarrollo, deben ser asimilados y, a veces, se aplican a que permanezcan en su memoria. Por lo tanto, discutiremos qué selectores Son adyacentes, y cuáles son sus subsidiarias y entienden el ejemplo.
Subsidiarias de CSS - Elementos que se encuentran dentro del elemento padre. Un ejemplo de esto puede ser el siguiente. Tenemos un bloque en el que hay un párrafo, otro bloque y imagen. Estos son estos tres elementos son subsidiarias. Si otros elementos también están ubicados en el bloque infantil, ya no son subsidiarias en el primer bloque, sino que son subsidiarias en el bloque en las que están directamente. Espero que hayas atrapado la esencia.
Selectores CSS vecinos - Los elementos se ubican el uno en el otro en el código de documento. Un ejemplo de esto es. Tenemos un párrafo y la siguiente etiqueta. lapso.. Todo está bastante claro, pero solo tenemos que desmontar todo esto en ejemplos reales.








Texto en párrafo


Texto en lapso

Ya no es un texto infantil en el párrafo.








Con la ayuda de los estilos, agregue el mismo resultado para la etiqueta. lapso.

Div \u003e Lapso (
tamaño de fuente: 200%;
}

pag. + lapso (
color rojo;
}

El resultado del código en ambos casos se aplicará a la etiqueta. lapso.Porque es una subsidiaria en relación con la etiqueta. div y el siguiente después de la etiqueta pag.. Por lo tanto, la fuente se ha vuelto dos veces más y rojo. Ahora tratamos completamente con subsidiarias y selectores adyacentes en CSS¡Y solo puedes fortalecer tu conocimiento en la práctica, a los próximos!

La sintaxis de CSS es fácil, y para comprenderla, no necesita tener un doctorado en el área de TI. Sin embargo, este es uno de los pocos idiomas populares, que no es lógico en el sentido más directo de la palabra. A diferencia de otros lenguajes de programación web, como JavaScript y PHP, Problemas de CSS No se resuelve utilizando la lógica ordinaria. Algoritmos como "Si x, luego haz que Y, de lo contrario, hágase Z" o "Seleccione TODO Y, luego haga x" no se puede implementar en un idioma de este tipo como CSS. En pocas palabras, este es un idioma creado para el diseño, el idioma para los diseñadores, no los desarrolladores. Algunos de los programadores experimentados con los que trabajé, fue por esta razón que se gastó mucho esfuerzo para dominar CSS.

El aprendizaje de CSS comienza con clases e identificaciones, así como el uso. Y # para la designación directa de elementos. Es suficiente para construir un sitio web con todas las funciones, pero esta no es una solución bastante flexible en caso de un cambio completo de diseño. Echemos un vistazo a un enfoque alternativo para administrar los elementos tan difíciles de alcanzar.

Combinación relacionada con la vecina
Comencemos con un selector, que es conveniente en situaciones difíciles, desde un combinador relacionado cercano. Un combinador relacionado vecino se denota con la conexión de dos elementos usando un signo +:

H1 + P.
Esto resalta el siguiente elemento P ubicado inmediatamente después del elemento H1 en el DOM. La teoría tipográfica asume que debemos usar sangrías en los párrafos de texto, pero solo si siguen el otro párrafo. En la práctica, esto se puede utilizar para hacer sangrías en todos los párrafos, excepto la primera:
P + P (texto-sangría: 1EM;)
Es mucho más conveniente que destacar el primer párrafo con Clase \u003d "Primero". Tres líneas, sin clases y apoyo completo de los navegadores. Si tiene una etiqueta IMG relacionada con el contenido del sitio, dentro de las etiquetas P (como, de hecho, y debe hacerlo), simplemente puede volver a empujar sus campos izquierdos con el valor negativo de -1EM:
P + P img (margen-izquierda: -1em;)
Bastante simple, ¿verdad? ¿Y si queremos resaltar la primera línea de todos los párrafos que se encuentran inmediatamente después de los titulares, sin cambiar todos los otros párrafos? Una vez más, podemos usar la clase de presentación. Un selector sencillo hecho de un combinador de compuestos vecinos, y el pseudoemento se enfrentará con la tarea:
H1 + P :: PRIMERA LÍNEA (Variante Fuente: Pequeñas capas;)
Nota: Pseudo-elemento: la primera línea se acepta en CSS 2.1, el CSS 3 usa una entrada :: para establecer una distinción entre pseudo-clases y pseudo-elementos.

Combinador saludable
El protocolo de marcado habitual es una sala de particiones en un elemento llamado en #page o #wrap:

En subtítulos anteriores, estudiamos relaciones relacionadas entre las etiquetas del documento HTML, incluidos los selectores considerados elementos hija. Ahora es el momento de familiarizarse con los selectores de elementos y selectores relacionados de elementos vecinos.

Selectores vecinos

Con la ayuda de los selectores vecinos (también llamados relacionados), se seleccionan elementos de una página web que tienen un padre común y se encuentran al lado del otro. El estilo se aplica a este último en el elemento selector.

Ejemplo: Supongamos que necesitas cada párrafo

Que va primero después del encabezado

, tenía una fuente inclinada. Esto se puede implementar utilizando dicho código CSS:

H1 + P (estilo de fuente: cursiva;)

Recordando esta regla, en primer lugar, debe especificar el nombre del primer vecino, luego agregue un símbolo + y el nombre del segundo vecino (el que desea aplicar el estilo). Puedes crear unas combinaciones más largas. Esquema de escritura selector: selector1 + selector2 + ... + SELECTORN () (Estilo aplicado a SELECTORN).

Ejemplos de escritura:

/ * Párrafo sangrado a 30px * / p + img (Padding-top: 30px;) / * Color verde para el párrafo, que sigue después de H3 en paquete con H2 * / H2 + H3 + P (Color: Green;)

Selectores relacionados

Selectores relacionados (otros nombres: Enfermería, hermano) le permiten elegir elementos de las páginas HTML que están relacionadas entre sí (es decir, tener un padre común y en el mismo nivel). Los selectores de enfermería son similares a los vecinos, pero difieren en que el estilo se aplica a todos los elementos del tipo seleccionado, y no solo el primero de ellos. En lugar del signo +, se usa el símbolo de Tilda ~.

Ejemplo: Cambiaré un poco la tarea anterior e imagine que necesita hacer una fuente inclinada para todos los párrafos.

Que vienen después del encabezado

. El código CSS se verá así:

H1 ~ P (estilo de fuente: cursiva;)

... y un poco html, por ejemplo:

Título 1.

Título 2.

Eche un vistazo al código HTML: el estilo se aplicará a todas las etiquetas.

Quien sigue después Etiqueta

y se encuentran antes de Padre de la etiqueta de cierre
. En nuestra variante hay 3 elementos.

A lo que se aplican el estilo. Tenga en cuenta que la etiqueta

No lastima esto. Tenga en cuenta también que en este caso de estilo. no será aplicado a la etiqueta

El cual está localizado encima

así como la etiqueta

Tener otro padre

.

conclusiones

Utilizando los selectores adyacentes (adyacentes), puede usar el estilo al elemento en el caso cuando debe ser inmediatamente después de otro elemento (o grupo de elementos). Funciona con elementos que están en el mismo nivel y tienen un padre común.

Con la ayuda de los selectores relacionados, puede aplicar el estilo a todos los elementos del tipo seleccionado en el caso cuando se sigan inmediatamente después de otro elemento (o grupo de elementos). Funciona con elementos que están en el mismo nivel y tienen un padre común.

Descripción

Vecinando los elementos de la página web cuando se siguen unos de otros en el código del documento.

Sintaxis

E + F (descripción de las reglas de estilo)

Para controlar los elementos adyacentes, se utiliza el símbolo más (+), que se instala entre dos selectores E y F. Los espacios alrededor de la ventaja no se requieren. El estilo con tal entrada se aplica al elemento F, pero solo si está adyacente al elemento E e y debe ser inmediatamente después de eso. Considere varios ejemplos.

Lorem ipsum dolor SIT AMET.

Etiqueta Es una subsidiaria en relación con la etiqueta.

Ya que está dentro de este contenedor. Respectivamente

Actúa como padre .

Lorem ipsum dolor sENTARSE. Amet.

Etiquetas y No se superponen y son elementos vecinos. Lo que están ubicados dentro del contenedor.

No afecta su actitud.

Lorem. ipsum. Dolor SIT AMET, consentetuer. Adipisting. elit..

Vecino aquí son etiquetas y , así como y . Donde y Los elementos vecinos no pertenecen debido al hecho de que hay un contenedor entre ellos. .

HTML5 CSS 2.1 IE CR OP SA FX

Selectores vecinos

Lorem. ipsum. Dolor SIT AMET, consentetuer. Elit adipisting.

Lorem ipsum dolor sentarse amet, consentetuer. Elit adipisting.



El resultado de este ejemplo se muestra en la FIG. uno.

Higo. 1. Texto rojo para los selectores vecinos.

Navegador

Internet Explorer 7 Browser no aplica el estilo si hay un comentario entre los selectores (B + / * Plus * / i).

Hola, queridos lectores! Continúe con los selectores de CSS del tema y hoy intentaré explicar lo que es selectores CSS vecinos, así como lo que juega el rol. selector universal. El conocimiento del mecanismo del uso de todos los tipos de fondos CSS alcanzará el contenido óptimo y compacto del documento, que describe los estilos de los elementos, que es uno de los componentes de la promoción exitosa de su recurso, de modo que en ningún caso se descuida La posibilidad de obtener información útil sobre el concepto del selector y sus tipos de especies.

Si recuerda y sigue cuidadosamente las publicaciones, muchos tipos de selectores ya han sido considerados; ; . Una vez más, insto a no descuidar el estudio de los fundamentos de CSS, ya que le dará muchas preferencias en el futuro.

Selector universal

Ahora vaya directamente a la esencia de la publicación de hoy. En cuanto al selector universal, es bastante simple, por lo que no me detendré durante mucho tiempo. Sintaxis de escribir reglas CSS, que utiliza el selector universal, lo siguiente:


Aquí está el operador "*" y significa que tenemos un selector universal. Se utiliza cuando es necesario instalar. un solo estilo Para todos los artículos en la página web. A veces, el selector universal especifica no necesariamente. Por ejemplo, grabar. * Clase I.Class en estos casos es completamente idéntica. Ahora necesariamente un ejemplo. Normalmente, la más común es la definición de una sola fuente, tamaño y color, así como la ubicación del texto habitual en la página o el sitio del blog.

* (Fuente-familia: Tahoma, Arial, Helvetica, Sans-Serif; / * Fuente para texto * / Color: # 646464; / * Texto Color * / Tamaño de fuente: 75%; / * Tamaño del texto * / Texto-alineado : Izquierda; / * Ubicación de texto * /)

Por lo tanto, puede definir el diseño del texto para todos los elementos que se encuentran en la página. Obtuve, para un caso determinado, el resultado será similar si, en lugar de un selector universal, use el nombre de la etiqueta del cuerpo, que incluye las etiquetas de todos los elementos.

Selectores CSS vecinos

Bueno, ahora un poco más de tiempo pagará por los selectores vecinos. Vecinos de los elementos de la página web cuando se encuentran directamente uno junto al otro en el código de documento. Al mismo tiempo, la sintaxis de los estilos CSS tiene este tipo:

Ahora tomaremos el párrafo de texto definido por la etiqueta P en la que los B, I y las etiquetas grandes se incluirán como elementos infantiles, que definen el formato de texto, respectivamente, la liberación de negrita, cursiva y aislamiento al aumentar la fuente:

Este párrafo usa tAG B., tAG I., etiqueta grande.

Y utilizando la herramienta de edición CSS y HTML, que está integrada en versiones más nuevas Todas navegadores populares (,) y cuál es un análogo del famoso plugin para navegador Firefox. (), Insertaré este párrafo a cualquier lugar en una página web absolutamente cualquier página (hice bien en la página del artículo anterior por el primer párrafo). Esto significa, por ejemplo, se llama simplemente presionando la tecla F12. Se puede utilizar para fijar prácticamente los títulos de los títulos de "Conceptos básicos de HTML" y "Libro de texto CSS". Entonces, inserto un pedazo de texto en la forma del primer párrafo:


Este párrafo será experimental y considere usar su ejemplo. selectores vecinos. Como ya dije, las etiquetas B, I y las grandes son subsidiarias para la etiqueta del párrafo P, ya que todos están directamente dentro del contenedor P. Aquí, las vecinas son etiquetas B y I, así como yo y grande. Ahora aplique la regla de CSS para los selectores vecinos:

B + I (Color: rojo;) I + Big (Color: Green;)

Después de que se apliquen estos estilos, el párrafo se verá así:


Esto es cierto para todas las etiquetas de la página web, que incluyen elementos B, I y BIG. Además, debe haber b y yo, yo y grande cerca, para otras combinaciones, este CSS no funcionará. Ahora creo que le está claro cómo se aplican los selectores vecinos al escribir o editar un documento CSS. Otra nota muy importante: si tiene tiempo para notar, en el caso de los elementos adyacentes, el estilo especificado se aplica solo al segundo elemento.

Un ejemplo con un párrafo, que se consideró muy visual y le permite comprender rápidamente la esencia de los selectores vecinos en CSS. Sin embargo, en la práctica, comúnmente se utilizan otras áreas de aplicar selectores. Diga, muy a menudo en el cuerpo del artículo, es necesario incluir un poco de texto, especialmente decorado, así: notas al pie, notas, etc.

Para estos fines, una clase separada generalmente la crea y la aplica al párrafo necesario. Pero una forma mucho más óptima es el uso de los selectores vecinos. Por ejemplo, en mi blog hay estilos creados para el registro de un encabezado convencional H3.

H3 (Tamaño de fuente: 1.7EM; / * Tamaño de fuente * / Texto-alineado: Centro; / * Colocación de texto * / Fuente-Peso: Normal; / * Diseño de texto normal * / Fuente: Tahoma, Arial, Helvetica, Sans-serif; / * estilo de fuente * / color: # 646464; / * Color de texto * /)

Para resaltar las notas del título o las notas al pie, configure una clase especial, digamos, ponga:

H3.put (Color: rojo; / * Color de texto * / margen-izquierda: 5px; / * Retiro en la izquierda * / margen-superior: 0.5EM; / * sangra desde arriba * / PADDING: 10px; / * Campos alrededor Texto * / Text-align: Izquierda; / * Ubicación del texto * /)

Ahora utilizamos selectores adyacentes para crear un estilo especial de un párrafo de oración, este párrafo se colocará directamente en el título con el estilo "H3.PUT":

H3.Put + P (Fondo: # FFEFD5; / * Color de fondo * / Margin-Izquierda: 15px; / * Retiro en la izquierda * / Margin-derecha: 120px; / * Retiro en la derecha * / Margin-Top: 0.5 em; / * sangra desde arriba * / relleno: 5px; / * campos alrededor de texto * /)

De nuevo usando la herramienta de edición Google Chrome.Me han descubierto con ustedes todos sus oídos (pero vale la pena), ingrese el titular de las notas al pie, sin olvidar de ponerle la clase PUT:

¡Atención!

Luego escribe el texto de la nota al pie:

Los materiales presentados en esta publicación son muy importantes en términos de estudiar los cimientos de CSS (tablas de estilo en cascada)

.

Después de todas estas televisiones, obtenemos un párrafo de notas al pie en la página web (le recuerdo que este párrafo que inserté al final de mi artículo sobre mis subsidiarias y selectores contextuales):


Ahora, en un blog o sitio cuando vinculan un "puesto" a cualquier etiqueta H3, se le cobrará una nota a pie de página en la página web. Además, está decorado de una manera especial solo el primer párrafo después de la etiqueta H3 con "Clase \u003d" PUT "". Pero esto es exactamente lo que logramos, ¿verdad?

En esto, permítanme terminar el manual de hoy, que contenía un algoritmo para el uso de los selectores vecinos, así como a los selectores universales. Espero que este artículo te desvanezca, queridos lectores se suscriban a