1. Selector de tipo ¿Qué es un selector de tipo? Se refiere al carácter de línea que toma como nombre el tipo de etiqueta existente en la página web. El cuerpo es un tipo de etiqueta en una página web, que incluye div, p y span.
De la siguiente manera:
cuerpo {}
div {}
pags{}
durar {}
2. Selector de grupo
Para objetos XHMTL, se puede asignar el mismo estilo a un grupo al mismo tiempo.
Los selectores están separados por comas. La ventaja de escribir de esta manera es que el mismo estilo solo necesita escribirse una vez, lo que reduce la cantidad de código y mejora la estructura del código CSS.
Al usarlo, tenga en cuenta que la "coma" está en modo de ancho medio, no en modo de ancho completo chino.
Como sigue:
h1,h2,h6,p,span
{
tamaño de fuente: 12px;
color:#FF0000;
familia de fuentes: arial;
}
3. Contiene selectores para especificar estilos para subobjetos en un objeto, de modo que el método de selección desempeñe un papel.
Cabe señalar que esta configuración de estilo solo es válida para las etiquetas de subobjetos de este objeto. Esta configuración de estilo no se aplica a otros subobjetos que existen solos o que están ubicados fuera de este objeto.
La ventaja de esto es que nos ayuda a evitar configuraciones excesivas de identificación y clase y definir directamente los elementos requeridos.
Como sigue:
intervalo h2
{
color: rojo;
}
como sigue:
cuerpo h1 span fuerte
{
peso de fuente: negrita;
}
4. El selector de identificación es
un selector que aparece según el principio del modelo de objetos de documento DOM. Para un archivo XHTML, a cada etiqueta se le puede asignar un nombre en forma de id="", pero debe tenerse en cuenta que en. un archivo XHTML. El ID es único y no se puede repetir.
En una página web con diseño CSS div, puede nombrarla para diferentes propósitos, como encabezado para el encabezado y pie de página para la parte inferior.
El XHTML es el siguiente:
<div id="content"></div>
El CSS es el siguiente:
#content
{
tamaño de fuente: 14px;
altura de línea: 120%;
}
5. Selector de clases
De hecho, id es una extensión de las etiquetas XHTML y class es una combinación de múltiples etiquetas SHTML. La traducción literal de clase significa clase o categoría.
Para etiquetas XHTML utilice class="" para la asignación de nombres. A diferencia de los identificadores, las clases se pueden reutilizar. Se pueden definir directamente varios elementos con el mismo estilo como una clase.
Las ventajas de usar clase son evidentes. Refleja la reutilización del código CSS. Se pueden definir muchas etiquetas usando un estilo sin escribir un código de estilo para cada una.
El XHTML es el siguiente:
<p class="he"></p>
<span class="él"></span>
<h5 clase="él"></h5>
El CSS es el siguiente:
.él
{
margen: 10px;
color de fondo: rojo;
}
6. Selectores específicos de etiquetas
Si desea utilizar id y clase al mismo tiempo, y también desea utilizar selectores de etiquetas al mismo tiempo, puede utilizar el siguiente método:
h1#content {}
/*Representa todas las etiquetas h1 con id como contenido*/
h1.p1 {}
/*Indica todas las etiquetas h1 con clase p1*/
La precisión del selector específico de etiqueta está entre el selector de etiqueta y el selector de identificación/clase, y es uno de los selectores más utilizados.
7. Selectores combinados
Para todos los selectores anteriores, utilícelos en combinación. De la siguiente manera:
h1 .p1 {}
/*Indica todas las etiquetas con clase p1 bajo h1*/
#contenido h1 {}
Representa todas las etiquetas h1 debajo de la etiqueta con contenido de identificación
h1 .p1,#contenido h1 {}
/*Representa todas las etiquetas h1 bajo h1 con clase p1 y todas las etiquetas h1 bajo la etiqueta con contenido id*/
h1#contenido h2{}
/*etiqueta h2 debajo de la etiqueta h1 con id como contenido*/
Los selectores CSS son muy gratuitos y flexibles. Puede utilizar varios selectores según las necesidades de la página para estructurar y optimizar el archivo CSS tanto como sea posible.