El selector CSS es la base del diseño de nuestra página web CSS. ¿Qué son exactamente los selectores de CSS y cómo utilizarlos de forma razonable? Los selectores se pueden dividir en tres categorías. Excepto por la primera categoría de selector HTML, podemos nombrar las otras dos categorías nosotros mismos al nombrar, preste atención a incluir la semántica o agregar los comentarios necesarios para que nuestro código sea más claro y más fácil de leer. .
selector de etiquetas HTML
El selector HTML es una etiqueta HTML, como: DIV, TD, P, H1, etc. Si las define con CSS, las propiedades de esta etiqueta en la página controlada por el artículo CSS se mostrarán de acuerdo con su definición.
Por ejemplo, si queremos que el color de H1 sea rojo, entonces: H1 {color: rojo}. Aquí aprendemos una característica de CSS, que puede definir varios selectores en una regla. Tales como: H1, H2, TD {color: rojo}. Esta definición permite que todos los H1, H2 y TD sean rojos. En uso específico, se pueden combinar y escribir varios atributos con la misma configuración para reducir nuestro código.
selector de clase selector de clase
Hay dos tipos de selector de clases, uno se llama selector de clases relacionadas, que está relacionado con una etiqueta HTML. Su sintaxis es etiqueta.Nombre de clase {propiedad:valor}. Por ejemplo: queremos establecer el color de algunos H1, pero no de todos, en rojo H1.redone {color: rojo}: el primer H1 es rojo, pero el segundo no.
El segundo tipo es un selector de clase independiente. Puede ser utilizado por cualquier etiqueta HTML. Su sintaxis es la siguiente. Nombre de clase {propiedad: valor} Si tenemos la siguiente definición, blueone {color: azul} entonces podemos aplicarla a diferentes etiquetas. Es muy obvio que el selector de clases nos da más libertad y espacio para jugar.
selector de identificación selector de identificación
De hecho, la función del selector de ID es muy similar a la del selector de clase independiente. La diferencia es que su sintaxis y uso son diferentes y son útiles para que JavaScript manipule elementos HTML. En nuestro diseño, a menudo utilizamos selectores de ID para definir diferentes áreas estructurales.
Su sintaxis es la siguiente #IDname {propiedad:valor}. Supongamos que tenemos la siguiente definición #yelowone {color: amarillo}. Podemos aplicar esta definición a cualquier etiqueta con el mismo nombre de ID, como por ejemplo: texto aquí. Puede pensar que dado que el selector de ID tiene la misma función que el selector de clase independiente, ¿por qué existen ambos? Los elementos HTML con ID se pueden manipular mediante JavaScript.