En este artículo, discutiremos cómo el selector de CSS es importante mientras diseñamos la página web. El papel del selector de CSS en la página web receptiva es muy importante. Discutamos uno por uno.
Función del selector de niños: en el selector de niños, las propiedades de cualquier elemento son el padre inmediato de otro elemento.
Sintaxis:
if article > p
Define que el elemento de párrafo es un elemento secundario directo del artículo, luego se aplicarán las propiedades del selector de CSS.
html
<!DOCTYPE html> <html> <head> <style> /* In child selector any article element whose immediate parent is a section element. */ section > article { color: green; font-size: 16px; } /* In child selector any h2 element whose immediate parent is a section element. */ section > h2 { color: green; } </style> </head> <body> <h1>Child Selector</h1> <section> <h2>Subheading 1</h2> <!-- Applicable to Subheading 1 because h2 is direct child of section here. --> <div> <article> In this example, article is not the direct child and ARTICLE which is inside DIV, which is inside SECTION. In CSS properties of child, selector will not apply in this section. </article> </div> </section> <h2>Subheading 2</h2> <section> <article> In this example ARTICLE as a direct child of the SECTION element. In CSS properties of child, selector will directly apply in this section. </article> <!-- Not applicable for Subheading 2, because h2 is not direct child of section here. --> </section> </body> </html>
El resultado del código anterior verifica si las propiedades del selector CSS secundario son aplicables a los elementos de la sección.
Producción:
Función del selector de descendientes: las propiedades del selector de CSS del selector de descendientes se aplican a todos los niveles o elementos principales.
Sintaxis:
section li
Define que «li» es el elemento secundario, pero en cualquier nivel también considera que solo se aplicará el elemento «li» en el elemento de sección y las propiedades.
html
<!DOCTYPE html> <html> <head> <style> /* In this Descendant selector, properties will be applicable to all "li" elements that are inside section element. */ section li { color: green; } </style> </head> <body> <h1>Descendant Selector</h1> <section> Table of contents: <ul> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li> </ul> </section> <article> Shopping List: <ul> <li>Cookies</li> <li>Cake</li> <li>Pie</li> </ul> </article> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Ashish_rana y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA