Dirección de especificación del selector CSS3: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3 seleccione la última especificación del selector: https://www.w3.org/TR/selectors
Selector CSS3:
1. Selector básico
/ * Selector comodín * / * {margen: 0; relleno: 0; borde: ninguno;}
/ * Selector de elemento * / cuerpo {fondo: #eee;}
/ * Selector de clase * /. list {list-style: square;}
/ * ID selector * / #list {width: 500px; margin: 0 auto;}
/ * Descendant selector * / .list li {margin-top: 10px; background: #abcdef ;}
2. Extensión básica del selector
/ * Selector de subelementos * / #wrap> .inner {color: pink;}
también se puede llamar un selector descendiente directo, este tipo de selector solo se puede combinar con descendientes directos, no con niveles profundos Elemento descendiente de
* / * selector de hermano adyacente * / #wrap #first + .inner {color: # f00;}
Solo coincidirá con el elemento hermano inmediatamente siguiente
/ * selector universal de hermano * / #wrap #first ~ div {border: 1px solid;} Coincidirá
con todos los elementos hermanos (no es necesario seguir inmediatamente)
/ * Agrupación de selectores * / h1, h2, h3 {color: pink;}
La coma aquí se llama combinador
3. Selector de atributos
/ * existencia y valor selector de atributos * /
[attr]: este selector selecciona todos los elementos que contienen atributos attr, independientemente del valor de attr.
[attr = val]: este selector selecciona solo todos los elementos cuyo atributo attr tiene asignado val.
[attr ~ = val]: indica un elemento con un atributo llamado attr, y el atributo es una lista de valores separados por espacios, al menos uno de los cuales es val.
/ * Selector de atributo de valor de subcadena * /
[attr | = val]: seleccione si el valor del atributo attr es val (incluido val) o elementos que comienzan con val-.
[attr ^ = val]: seleccione el elemento cuyo valor de atributo attr comienza con val (incluido val).
[attr $ = val]: selecciona elementos cuyo valor de atributo attr termina con val (incluido val).
[attr * = val]: seleccione el elemento que contiene la cadena val en el valor del atributo attr.
4. Selector de pseudo-clase y pseudo-elemento
/ * link pseudo-class * / Nota: link ,: visitado y: target son para elementos de enlace!
: el enlace representa todos los anclajes
que actúan como hipervínculos y apuntan a una dirección no visitada: visitado representa todos los anclajes que actúan como hipervínculos y apunta a una dirección visitada
: el destino representa un elemento especial y su identificación es el ID de fragmento del URI Símbolo (contenido detrás de #)
/ * Pseudo-clase dinámica * / Nota: hover,: active ¡básicamente se puede aplicar a todos los elementos!
: desplazarse significa desplazarse sobre elementos
: activo significa emparejar elementos activados por el usuario (cuando se hace clic y se mantiene)
Dado que: el enlace y: visitado de la etiqueta a pueden cubrir todos los estados de la etiqueta, cuando: enlace ,: visitado,: desplazarse y: activo aparecen en la etiqueta al mismo tiempo,: ¡el
enlace y: visitado no se pueden colocar al final! ! !
Privacidad y: selector visitado
Solo se pueden aplicar los siguientes atributos a los enlaces visitados:
color
fondo-color
borde-color
/ * Formulario relacionado pseudo-clases * /
: habilitado Coincidir formularios editables
: deshabilitar Coincidencia de formularios deshabilitados
: coincidencia marcada Forma seleccionada
: el foco coincide con la forma enfocada
/ * Pseudo-clase estructurada * / ¡
El valor del índice comienza a contar desde 1! ! ! !
index puede ser variable n (solo n)
index puede ser par
#wrap ele: nth-child (index) significa hacer coincidir el elemento hijo de index en #wrap Este elemento hijo debe ser ele
#wrap ele: nth-of- type (index) significa hacer coincidir el elemento ele elemental de index en #wrap.
Además, hay una diferencia importante entre: nth-child y: nth-of-type! !
¡El enésimo tipo está centrado en elementos! ! !
: nth-child (índice) 系列
: first-child
: last-child
: nth-last-child (index): 倒着 查找 子 元素
: only-child (相 对于: first-child: last-child 或者: nth- child (1): nth-last-child (1))
: nth-of-type (index) 系列
: first-of-type
: last-of-type
: nth-last-type (index)
: only-of- type (相 对于: first-of-type: last-of-type 或者: nth-of-type (1): nth-last-of-type (1))
: not
: empty (el contenido debe estar vacío, sin espacios, sin atributos)
/ * pseudo-elementos * /
:: after
:: before
:: firstLetter
:: firstLine
:: selection
5. La prioridad declarada por css
La particularidad del
selector La particularidad del selector está determinada por los componentes del propio selector. El valor de particularidad se expresa en 4 partes, como 0,0,0,0
. La particularidad específica de un selector es la siguiente Para determinar:
1. Para el valor del atributo de ID dado en el selector, agregue 0,1,0,0
2. Para cada atributo de clase, selección de atributo o pseudo-clase dada en el selector, agregue 0,0,1, 0
3. Para cada elemento y pseudoelemento dado en el
selector , agregue 0, 0, 0, 1 4. La particularidad del selector comodín es 0, 0, 0, 0 5. El
carácter especial del selector al selector Ninguna contribución en absoluto
6. La particularidad de la declaración en línea es 1,0,0,0
7. La herencia no tiene particularidad
La particularidad 1,0,0,0 es mayor que toda la particularidad (no carry) que comienza con 0. La particularidad del
selector eventualmente se otorgará a su declaración correspondiente.Si
varias reglas coinciden con el mismo elemento, y algunas declaraciones entran en conflicto entre sí Cuanto más específico, más dominante
Nota: el selector de id y el selector de atributos
div [id = "test"] (0,0,1,1) y #test (0,1,0,0)
declaraciones importantes
En ocasiones, una declaración es más importante que todas En otras declaraciones, css2.1 se denomina declaración importante
y permite que
se inserte! Importante antes del punto y coma final de estas declaraciones para indicar que se debe colocar con precisión o la declaración no es válida.
! important siempre debe colocarse al final de la declaración, delante del punto y coma
La declaración marcada con! Importante no tiene un valor especial especial, pero debe considerarse por separado de las declaraciones no importantes. De hecho, todas las declaraciones importantes se dividirán en un grupo por el navegador, los conflictos de declaraciones importantes se resolverán dentro de él, las declaraciones no importantes también se dividirán en un grupo y los conflictos de declaraciones no importantes también se resolverán dentro de él. Aviso importante Aviso importante y no el conflicto, ganando siempre es importante declaración de
la herencia
La herencia no tiene particularidad, ni siquiera particularidad 0. La particularidad 0 es más fuerte que la no especificidad. La
fuente del
estilo CSS es aproximadamente tres tipos de
creadores,
lectores,
agentes de usuario (navegador)
Pesos :
Declaración importante del lector Declaración importante del
creador Declaración
normal del autor Declaración normal del
lector Declaración del
agente del usuario
Cascada
1. Descubra todas las reglas relevantes, estas reglas contienen un selector
2. Calcule
primero la prioridad de la declaración La fuente se ordena
según la particularidad del selector y
finalmente en orden
