Qué es un selector:
Cada definición de estilo CSS consta de dos partes, el formulario es el siguiente:
[code] 选择器{
样式;
}
[/ código] La parte antes de {} es el "selector". El "selector" especifica el objeto del "estilo" en {}, es decir, sobre qué elementos de la página web actúa el "estilo".
Selector de base
- Selector de etiquetas (elija el nombre de la etiqueta) : una página HTML completa se compone de muchas etiquetas diferentes, y el selector de etiquetas determina qué etiquetas usar el estilo CSS correspondiente;
como por ejemplo:
p{
color:#900;
font-size:12px;
background:#090;
}
- Selector de ID (## + nombre de ID) : el selector de ID puede especificar un estilo específico para los elementos HTML marcados con una ID específica. El elemento se selecciona en función del ID del elemento, que es único, lo que significa que el mismo ID solo puede aparecer una vez en la misma página del documento;
Tal como:
#demoDiv{
color:#FF0000;
}
- Selector de clase (. + Nombre de clase) : El selector de clase se selecciona de acuerdo con el nombre de la clase y está marcado con "." Al frente;
Tal como:
.demoDiv{
color:blue;
}
- Selector universal (seleccionar todos los elementos) : El selector universal está representado por *;
como:
* {
color:green;
font-size: 12px;
}
- Selector de grupo : cuando varios elementos tienen los mismos atributos de estilo, puede llamar a una declaración juntos, separados por comas; por
ejemplo:
p,h1,span{
color:red;
line-height:20px;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
El uso del selector de grupo simplificará enormemente el código CSS.Combine varios elementos con los mismos atributos para la selección y defina los mismos atributos CSS.Esto mejora en gran medida la eficiencia de la codificación y reduce la cantidad de archivos CSS.
Selector de jerarquía
- Selector de hijos (use> dividir entre elementos): Selector de hijos (selector de hijos) se refiere a sus descendientes directos, que pueden entenderse como el primer descendiente que actúa sobre los elementos hijos;
como por ejemplo:
p>span{
color:red;
}
- Selector de descendientes (separados por un espacio entre elementos): se utiliza para seleccionar los descendientes de un elemento específico o grupo de elementos, poner la selección del elemento padre en el frente y la selección de los elementos secundarios en la parte posterior, separados por un espacio en el medio,
como:
section span{
color:blue;
}
La diferencia entre
el selector de hijos y el selector de descendientes: 1) El selector de hijos (selector de hijos) se refiere solo a sus descendientes directos, y los selectores de descendientes actúan sobre todos los elementos de descendientes secundarios;
2) Los selectores de hijos se realizan a través de ">" Seleccionar, y los selectores de descendientes utilizan espacios para seleccionar;
- Selector de hermano (separado por + entre elementos): además del sub-selector y el selector de descendientes anteriores, es posible que también deseemos encontrar uno de los dos hermanos, como un elemento de encabezado h1 seguido de dos elementos de párrafo p. localice el elemento p del primer párrafo y aplíquele estilos. Podemos usar el selector de hermanos adyacente;
como:
h1 + p {
color:blue;
}
Selector de pseudoclase
Las pseudoclases se pueden aplicar a etiquetas de enlace, así como a algunos elementos de formulario, pero IE no admite la aplicación de elementos de formulario, por lo que generalmente las pseudoclases solo se aplicarán a estilos de enlace.
-
Selector
de pseudoclase dinámico El orden de escritura de los pseudo-selectores dinámicos:
1) enlace y visitado deben colocarse primero (sin orden, selector de pseudoclase estático);
2) enlace y visitado solo se pueden usar para una etiqueta;
3) enlace Y visitado es el foco
4) el foco está suspendido,
5) el desplazamiento está activo; -
Selector de pseudo-clase estructural
first-child: el primer elemento.
last-child: el último elemento.
nth-child (n): si desea seleccionar el número de un determinado elemento, n toma el valor.
nth-child (-n + m): El valor inicial de n de los primeros m elementos seleccionados es 0.
n-ésimo de tipo (n): seleccione el n-ésimo elemento.
nth-last-child (n): seleccione el n-ésimo elemento de la parte inferior. -
Selector de pseudo-clase negativa
Nombre del elemento: not (n) Además de un elemento determinado, otros elementos agregan estilos
Selector de pseudoelementos:
Todos los selectores de pseudo-elementos deben colocarse al final del selector donde aparece el pseudo-elemento, lo que significa que el selector de pseudo-elementos no puede ser seguido por ningún selector derivado;
- : primera letra, establece el estilo de la primera letra del elemento de bloque, también se admite la conversión de elementos en línea en elementos de bloque y elementos de bloque en línea;
div p:first-letter {
font-size: 20px
}
//选择div元素里所有的p元素的第一个字母或汉字;
- : primera línea: establece el estilo de la primera línea de texto;
.box .main:first-line {
color: #f00
}
//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
- : antes: establece el estilo anterior, puedes insertar el contenido generado y establecer su estilo;
body:before {
content: 'The Start:';
display: block;
}
//在body元素前插入文本内容'The Start:'，并设置其为块元素
- : after: Después de configurar el estilo, puede insertar el contenido generado y configurar su estilo; por
ejemplo:
body:after {
content: 'The End.';
display: block;
}
//在body元素最后插入文本内容'The End.'，并设置其为块元素
- input :: - webkit-input-placeholder (modifica el estilo de información de solicitud del cuadro de entrada)
Selector de atributos
La coincidencia se basa en el atributo del elemento, y su atributo puede ser un atributo estándar o un atributo personalizado, también puede coincidir con varios atributos al mismo tiempo;
- Formato: nombre del elemento [nombre del atributo + "valor del atributo"]
input[type=“text”]
- Formato: nombre del elemento [nombre del atributo ^ = contenido que comienza con el valor del atributo]
seleccione el elemento que comienza con XXX
input[type^=“te”]+span{
color:red;
}
- Formato: nombre del elemento [nombre del atributo $ = contenido que termina en el valor del atributo]
seleccione el elemento que termina en XXX
input[type $ =“d”]+span{
color:blue;
}
- Formato: nombre del elemento [nombre del atributo * = contenido contenido en el valor del atributo]
seleccione el elemento que contiene XXX
input[type*=“i”]+span{
color:green;
}
Conclusión: Los amigos que quieran aprender el front-end web y los amigos que necesitan información del front-end pueden unirse a la falda de aprendizaje aquí, frente: 953, medio: 352, y finalmente: 883, hay todos, desde blancos hasta grandes en la falda, así como la información de aprendizaje de front-end, los archivos PDF de preguntas de entrevista de front-end, ¡gratis para compartir, ver o dejar!