Hable acerca de los selectores de CSS que quizás no conozca

¡Trabajar juntos para crear y crecer juntos! Este es el día 19 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de agosto", haga clic para ver los detalles del evento

Algunas reflexiones sobre el desarrollo de CSS

A día de hoy, CSS3 parece ser un término técnico relativamente nuevo en la mente de muchas personas, y el desarrollo de muchos módulos es difícil de atraer la atención de todos. Pero CSS3 no es nuevo, el desarrollo de esta tecnología comenzó en el siglo pasado.
¿Cuál es la razón?
No hay duda de que se debe al rápido desarrollo de JavaScript, que ha generado un montón de herramientas de precompilación de CSS representadas por SCSS/LESS. Debido a que estas herramientas son tan útiles, la atención de las personas se ha desplazado de la tecnología CSS en sí misma a las herramientas CSS.
¿Piensa cuánto tiempo ha pasado desde que escribió CSS ​​tradicional?
Al mismo tiempo, debido a la tendencia de All in JS, muchos códigos relacionados con el estilo se han migrado a JavaScript, como el marco CSS-in-JS representado por StyledComponent en el ecosistema React.
Entonces, ¿cuáles son las desventajas de usar JavaScript para escribir CSS en lugar de CSS?
Algunos piensan que el rendimiento es malo; algunos piensan que los estilos de depuración son complicados; otros piensan que las responsabilidades no son lo suficientemente claras.
No importa cuán malo sea, algunas personas todavía lo usan y mucha gente lo usa.
Este principio también se usa en marcos de interfaz de usuario. El desarrollo de WebComponents rara vez se ve afectado, pero cada movimiento de marcos como React afecta a innumerables desarrolladores.
Hay un dicho famoso en informática: nunca uses una tecnología por el bien de otra . Pero parece que ahora no funciona.
Pero no importa, mientras todos vayamos a aprender.
React debe aprenderse, y ECMAScript Next también debe aprenderse.
TailwindCSS para aprender, CSS3, CSS4 también necesitan aprender.
Esto no entra en conflicto.

Selectores CSS3

Más cerca de casa, el artículo de hoy hablará sobre algunos de los selectores relativamente nuevos en CSS3 y CSS4.
Los selectores de CSS no son desconocidos, y este es uno de los primeros conocimientos con los que todos entran en contacto cuando aprenden CSS.
Desde CSS3, los selectores se han vuelto cada vez más complejos y ya no son solo selectores básicos como selectores de clases, selectores de etiquetas, selectores de padres e hijos, etc.

es selector de pseudo-clase

Este selector originalmente no se llamaba is, sino metes o cualquier otro, pero ahora se ha identificado como es.
Vamos a ver cómo funciona.
Establecemos el color predeterminado de p para que sea negro, pero verde en principal, encabezado y pie de página.
El CSS nativo debe escribirse así:

/* p 标签默认样式 */
p {
  color: black;
}

/* p 标签在 main header 和 footer 中的样式 */
main p,
header p,
footer p {
  color: green;
}
复制代码

Si usa SASS, admite el anidamiento, por lo que debe escribirse así:

main, header, footer {
  p {
    color: green;
  }
}
复制代码

Esto hace que el código sea más limpio.
Si usamos el selector is para resolver este problema, podemos escribir:

:is(main, header, footer) p {
  color: green;
}
复制代码

es compatible con todos los selectores modernos, excepto IE, que está muerto de inmediato.
Como algunos casos más complejos como este:

article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
  color: red;
}
复制代码

Usamos es para hacerlos más fáciles.

article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
  color: red;
}
复制代码

Pero tenga en cuenta que no puede coincidir con pseudoelementos. Es imposible correr como el siguiente.

p:is(::before, ::after) {
  display: block;
  content: 'pseudo';
}
复制代码

donde selector de pseudoclase

where es compatible con todos los navegadores modernos como is, y normalmente hace lo mismo que is, por ejemplo:

:where(main, header, footer) p {
  color: green;
}
复制代码

Pero ciertamente no serán exactamente iguales, de lo contrario no harían falta dos.
La diferencia es que se aumenta el peso del selector, pero donde no.
Como este ejemplo:

main p {
  color: black;
}

:is(main, header, footer) p {
  color: green;
}

:where(main, header, footer) p {
  color: blue;
}
复制代码

Aunque donde está detrás, el color de p sigue siendo verde porque hará que el peso sea mayor.
Entonces, la ventaja de where es que puede anular cualquier estilo, y también puede ser anulado por cualquier estilo, sin usar un selector con un peso mayor o !importante.

tiene selector de pseudo-clase

El selector tiene requiere un elemento de destino, seguido de su elemento principal.
Este es actualmente el único selector que puede seleccionar el elemento principal.
Aquí se explica cómo establecer un borde para todas las etiquetas que contienen img y div:

a:has(img, div) {
  border: 2px solid blue;
}
复制代码

También admite un uso más complejo, como en los botones de formulario:

/* 必填字段无效时设置红色边框 */
fieldset:has(:required:invalid) {
  border: 3px solid red;
}

/* 必填字段无效时禁用提交按钮 */
fieldset:has(:required:invalid) + button[type='submit'] {
  opacity: 0.2;
  pointer-events: none;
}
复制代码

En el pasado, la implementación de esta funcionalidad tenía que hacerse a través de las capacidades de JavaScript, pero ya no.
Sin embargo, la compatibilidad con el selector has no es tan buena como Chrome y Safari solo brindan una compatibilidad limitada, y se espera que sea totalmente compatible para fines de 2022.