El selector (selector) es para seleccionar diferentes etiquetas de acuerdo a diferentes necesidades, esta es la función del selector. En pocas palabras, se utiliza para seleccionar etiquetas.
Clasificación: selector básico, selector compuesto
Tabla de contenido
Tres, suplemento selector CSS3:
1. Selector básico
1. Selector de etiquetas: use el nombre de la etiqueta HTML como selector
Un selector base se compone de un solo selector
Los selectores básicos incluyen: selector de etiqueta , selector de clase , selector de id y selector de comodín
Ventajas: puede configurar rápidamente el estilo para el mismo tipo de etiquetas en la página
Desventajas : No se pueden diseñar estilos diferenciados, y solo se pueden seleccionar todas las etiquetas actuales.
2. Selector de clases
Si desea diferenciar y seleccionar diferentes etiquetas, seleccione una o varias etiquetas individualmente, puede usar el selector de clases
Ejemplo de varios nombres de clases: <div class="red font"></div>
Fórmula de memoria: definición de puntode estilo,de clase. Uno o más, más comúnmente utilizados para el desarrollo.
- El selector de clase se identifica con "." (punto inglés), seguido del nombre de la clase (personalizado, nombrado por nosotros mismos).
- Los nombres largos o frases pueden usar guiones para nombrar selectores.
- No use números puros, nombres chinos, etc., y use letras en inglés tanto como sea posible.
- El nombre debe ser significativo e intentar que los demás sepan el propósito del nombre de la clase de un vistazo.
- Puede haber varios nombres de clase, y varios nombres de clase deben estar separados por espacios . Ponga el mismo estilo (parte común) de algunos elementos de etiqueta en una clase. Llámelo más tarde, para guardar el código CSS, por ejemplo, puede escribir un estilo unificado en el núcleo
3. Selector de ID: especifique un estilo específico para los elementos HTML marcados con una identificación específica
Nota: el atributo id solo puede aparecer una vez por documento HTML. Mantra: definición de estilo, llamada de identificación de estructura, solo se puede llamar una vez. La diferencia entre el selector de identificación y el selector de clase
- Un selector de clase (clase) es como el nombre de una persona. Una persona puede tener varios nombres y un nombre también puede ser utilizado por varias personas.
- El selector de identificación es como el número de identificación de una persona, que es único en toda China y no se puede repetir.
- Los selectores de clase se usan más comúnmente para modificar estilos, y los selectores de id generalmente se usan en elementos únicos de la página y, a menudo, se usan junto con JavaScript.
4. Selector comodín
Los selectores comodín se definen usando " * ", lo que significa seleccionar todos los elementos (etiquetas) en la página.
Resumen de selectores básicos
2. Selector compuesto
Está compuesto por dos o más selectores básicos combinados de diferentes formas .
Clasificación: Los selectores compuestos de uso común incluyen: selectores descendientes, subselectores, selectores de unión, selectores de pseudoclase, etc.
1. El selector descendiente, también conocido como selector de contención , puede seleccionar los elementos secundarios dentro del elemento principal.
- El elemento 1 y el elemento 2 están separados por un espacio
- El elemento 1 es el padre, el elemento 2 es el hijo y finalmente se selecciona el elemento 2
- El elemento 2 puede ser hijo o nieto, siempre que sea descendiente del elemento 1
- element1 y element2 pueden ser cualquier selector base
2. Subselector (importante)
Solo se puede seleccionar como el elemento secundario más cercano de un elemento. El entendimiento simple es seleccionar todos los elementos padre-hijo.
3. Selector de unión
Se pueden seleccionar múltiples conjuntos de etiquetas, y se puede definir el mismo estilo para ellos al mismo tiempo, entendido como el significado de y . Por lo general, se usa para la declaración colectiva. También llamado selector de grupo , el selector de unión es cada selector a través de una coma en inglés.
Por ejemplo: ul, div { declaración de estilo } /* seleccionar elementos de etiqueta ul y div */
Tres, suplemento selector CSS3:
(1) Selector de nivel:
1. Selector de hermanos adyacentes E+F
Seleccione el elemento F coincidente, y el elemento F coincidente está inmediatamente detrás del elemento E coincidente
Por ejemplo: seleccione el hermano de entrada, botón
2. Selector universal E~F:
Indica que E y F tienen el mismo elemento principal, y el elemento F está detrás del elemento E, pero no adyacente.
Por ejemplo: la lista de búsqueda que coincide después de seleccionar la entrada
(2) Selector de atributos
1. E[attr]: use solo el nombre del atributo, pero no determine ningún valor de atributo
2. E[attr="value"]: especifique el nombre del atributo y especifique el valor del atributo 3.
E[ attr~= "valor"]: especifica el nombre del atributo y tiene un valor de atributo. Este valor de atributo es una lista de palabras separada por espacios. La lista de palabras contiene una palabra de valor, y el "~" delante del signo igual debe ser
conocimiento extendido
4. E[attr^="value"]: se especifica el nombre del atributo, y hay un valor de atributo, y el valor del atributo comienza con value; 5.
E[attr$="value"]: el nombre del atributo se especifica, y hay un valor de atributo, y el valor de atributo termina con valor
6, E[attr*="value"]: se especifica el nombre de atributo, y hay un valor de atributo, y el valor de atributo contiene valor; 7,
E[attr|="value "]: se especifica el nombre del atributo y el valor del atributo es value o un valor que comienza con "value-" (como zh-cn);
(3) Selector de pseudoclase
1. Selector de pseudoclase estructural
X:first-child coincide con el primer elemento del subconjunto. IE7 puede admitir
X:last-child para que coincida con el último elemento X en el elemento principal.X
:nth-child(n) se usa para que coincida con el elemento secundario cuyo valor de índice es n. El valor del índice comienza desde 1.
La pseudoclase X:only-child generalmente se usa menos. Por ejemplo, el código anterior coincide solo con una p debajo del div. Es decir, si hay múltiples ps en el div, no coincidirá.
X:root coincide con el elemento raíz del documento. En HTML (una aplicación de lenguaje de marcado generalizado estándar), el elemento raíz siempre es HTML
X: el elemento vacío coincide con el elemento X sin ningún elemento secundario (incluido el texto que contiene)
2. Selector de pseudoclase de destino
E:target selecciona todos los elementos que coinciden con E, y los URL relativos apuntan a los elementos coincidentes ( utilizados junto con enlaces de anclaje )
3. Selector de pseudoclase de estado de elemento de interfaz de usuario
E:habilitado coincide con todos los elementos E que están disponibles en la interfaz de usuario (formulario)
E:deshabilitado coincide con todos los elementos E que no están disponibles en la interfaz de usuario (formulario)
E:marcado coincide con todas las interfaces de usuario (formulario) que están en el elemento E Elemento seleccionado E
E:selección coincide con la parte del elemento E que está seleccionada o resaltada por el usuario
4. Negación de selectores de pseudoclase
E:not(s) (Los navegadores IE6-8 no son compatibles con el selector :not().)
Coincide con todos los elementos E que no coinciden con el selector simple s
5. Selector dinámico de pseudoclase
E:enlace
Selector de pseudoclase de enlace
Seleccione el elemento E coincidente, y el elemento coincidente tiene un hipervínculo definido y no ha sido visitado. A menudo se usa en puntos de descripción de enlaces
E: visitado
Selector de pseudoclase de enlace
Selecciona el elemento E coincidente, y el elemento coincidente tiene un hipervínculo y ha sido visitado. A menudo se usa en puntos de descripción de enlaces
E: activo
Selector de comportamiento del usuario
Se selecciona el elemento E coincidente y se activa el elemento coincidente. Comúnmente utilizado en puntos de enlace y botones.
E: flotar
Selector de comportamiento del usuario
Se selecciona el elemento E coincidente y el mouse del usuario permanece en el elemento E. Los navegadores IE6 y anteriores solo admiten a: hover
E:foco El selector de comportamiento del usuario selecciona el elemento E coincidente, y el elemento coincidente recibe el foco