¿Cómo funcionan los selectores de atributo en CSS?

Los selectores de atributo en CSS son una forma de seleccionar elementos HTML basándose en la presencia de un atributo HTML o en el valor específico de ese atributo. Esto te permite aplicar estilos de manera más precisa sin necesidad de añadir clases o IDs adicionales a tus elementos.

Así es como funcionan sus sintaxis más comunes:

1. [nombre-atributo] (Presencia de atributo):
   Selecciona todos los elementos que simplemente tienen el nombre-atributo especificado, sin importar cuál sea su valor.
   /* Selecciona todos los elementos que tienen el atributo 'disabled' */
[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
/* Selecciona todas las imágenes que tienen un atributo 'alt' */
img[alt] {
border: 1px solid #ccc; /* Para indicar que tienen texto alternativo */
}
2. [nombre-atributo="valor"] (Valor exacto):
   Selecciona todos los elementos que tienen el nombre-atributo con un valor exactamente igual al valor especificado.
   /* Selecciona solo los inputs de tipo "text" */
input[type="text"] {
border: 1px solid blue;
}
a[target="_blank"] { /* Selecciona enlaces que se abren en nueva pestaña */
text-decoration: underline dotted;
}
3. [nombre-atributo~="valor"] (Valor que contiene una palabra específica en una lista):
   Selecciona elementos si el valor especificado es una de las palabras en una lista de palabras separadas por espacios dentro del atributo.
   /* Selecciona elementos cuya clase contenga la palabra exacta "importante" ej. class="aviso importante urgente" */
[class~="importante"] {
font-weight: bold;
}
4. [nombre-atributo^="valor"] (Valor que comienza con):
   Selecciona elementos cuyo valor del atributo nombre-atributo comienza exactamente con la cadena valor.
   /* Selecciona enlaces cuyo href comienza con "https://" */
a[href^="https://"] {
color: green; /* Indicar enlaces seguros */
}
5. [nombre-atributo$="valor"] (Valor que termina con):
   Selecciona elementos cuyo valor del atributo nombre-atributo termina exactamente con la cadena valor.
   /* Selecciona enlaces a archivos PDF */
a[href$=".pdf"]::after {
content: " (PDF)";
}
6. [nombre-atributo*="valor"] (Valor que contiene una subcadena):
   Selecciona elementos cuyo valor del atributo nombre-atributo contiene la subcadena valor en cualquier parte.
   /* Selecciona elementos cuyo atributo 'id' contenga la palabra "seccion" */
[id*="seccion"] {
margin-bottom: 20px;
}
7. [nombre-atributo|="valor"] (Valor que es exactamente "valor" o comienza con "valor-"):
   Selecciona elementos cuyo valor del atributo es exactamente valor o comienza con valor seguido inmediatamente por un guion (-). Es útil para seleccionar por atributos de idioma.
   /* Selecciona elementos con lang="es" o lang="es-AR", lang="es-MX", etc. */
[lang|="es"] {
font-style: italic;
}

Estos selectores te ofrecen una gran flexibilidad para aplicar estilos basados en la semántica y los datos ya presentes en tus atributos HTML.