Resumen de selectores CSS de uso común

Una lectura obligada para conocer los conceptos básicos de HTML: comenzar con HTML, la programación es muy simple

1. Selector primario

1. Nombra el selector con el nombre de la etiqueta, como p{ }
2. Con selector #id como #one{ ]
3. Con selector de nombre de clase .como .box
4. Se pueden utilizar selectores comodín como { } para borrar el estilo predeterminado
5. Utilice espacios para descender el selector (padre, descendiente...) como div box p{ }
6. Para selectores paralelos (varios selectores usan el mismo estilo) como p,span,li{ }
7. El > selector descendiente se usa comúnmente (el rango exacto es minúscula = some, más preciso) como div>ul>.li1 { }
8. Utilice ~ para asociar el selector (hermano~ sigue a todos los hermanos menores)
9. Toma + selector de hermano adyacente (hermano + al lado de un hermano menor)

2. Selector de atributos

• Seleccionar por atributo

Por ejemplo: a[target]{color: red; }
seleccione la etiqueta con el atributo de destino en la etiqueta a y luego agregue un estilo de fuente rojo

• Seleccione por atributos y luego limite la selección por valores de atributos

Por ejemplo: a[target$="k"]{ color: green; }
busque la etiqueta con el atributo de destino de la etiqueta a y el valor del atributo termine en k

Por ejemplo: a[href^="h"]{color: pink; }
busque una etiqueta que tenga el atributo href de la etiqueta a y que tenga un valor de atributo que comience con h.

Por ejemplo: a[target*="se"]{ color: skyblue; }
busque una etiqueta que tenga el atributo de destino de la etiqueta a y contenga el valor del atributo de los dos caracteres se

3. Selector de pseudoclase

3.1 Clase de estado

El estilo de un elemento cambia en un estado específico.

Estado del ratón:

1. :hoverEstado de mouseover comúnmente utilizado
2. :activeEstado de clic del mouse

Para uso únicamente con la etiqueta a:

3. linkEnlaces no visitados ( solo utilizados por una etiqueta )
4. :visitedEnlaces que han sido visitados ( solo para la etiqueta a )

Solo en el estado de control del formulario de entrada:
5. :focusCuando el cuadro de entrada del formulario está enfocado (el estilo predeterminado debe borrarse primero)
6. :checkedCuando el formulario está marcado (selección única/selección múltiple)

3.2 Clase de estructura

Estructura: Selector de elementos secundarios:nth-child(n)

1. El padre selecciona uno de los siguientes hijos: n-ésimo hijo(n),
   como por ejemplo:ul>li:nth-child(3)
2. Seleccione el primer elemento hijo, primer hijo del elemento padre,
   como por ejemplo:ul>li:first-child
3. Seleccione el último elemento hijo, último hijo del elemento padre,
   como por ejemplo:ul>li:last-child
4. Seleccione todos los elementos impares impar/2n-1 del elemento principal,
   como por ejemplo:ul>li:nth-child(2n-1)或 ul>li:nth-child(odd)
5. Seleccione todos los elementos pares par/2n del elemento padre,
   como por ejemplo:ul>li:nth-child(2n)或 ul>li:nth-child(even )
6. Seleccione varios elementos especificados al mismo tiempo, utilizando el selector paralelo (,) en el medio,
   como por ejemplo:li:nth-child(1),li:nth-child(4)
7. Indica seleccionar desde el mes hasta el último,
   como por ejemplo:ul>li:nth-child(n+3)

4. Selector de pseudoelementos

4.1 Cómo escribir selectores de pseudoelementos

• E::before equivale a agregar un subelemento adicional al frente del elemento E,
  como por ejemplo:p::before{content:"Hello World!"}
• E::after equivale a agregar un elemento secundario adicional al final del elemento E.
  Por ejemplo,p::after {content:"Hello World!"}
::afte a menudo se usa para borrar flotadores. El problema del colapso de la altura en los flotadores se analizó en el Capítulo 10.

4.2 Nota

• Debe tener contentestilos para que los dos pseudoelementos anteriores surtan efecto.
• El elemento hijo creado debe ser un elemento en línea .
• contentAdemás de escribir texto, también puedes usar la URL para especificar una imagen y otros métodos de escritura.

4.3 La diferencia entre selectores de pseudoclases y selectores de pseudoelementos

• El selector de pseudoclase equivale a agregar un nombre de clase virtual en determinadas circunstancias, mientras que el selector de pseudoelemento equivale a crear un elemento virtual.
• Pseudoclase: solo modificará el estilo del estado del elemento. (Usa uno :)
• Clase de pseudoelemento: crea un nuevo elemento virtual. (Usa dos::)

5. Comparación prioritaria de estilos.

!importante > estilos en línea > id > descendientes > clase | atributos | pseudoclases |
pseudoelementos > etiquetas | + (adyacente) | ~ (asociado) | > * comodín

Resumir

Los anteriores son algunos de los selectores más importantes en CSS que el editor ha compilado para usted y los ha resumido por categoría. Fue compilado con referencia a varias fuentes y a mi propio entendimiento. Si puede haber inexactitudes u omisiones, espero que puedan iluminarme y hacer correcciones. Me gustaría agradecerles de antemano.