HTML5 y la Web móvil: selectores CSS

• La sintaxis básica del selector

selector	tipo	Descripción funcional
*	selector salvaje	Seleccionar documentar todos los elementos HTML
mi	selector de elementos	Seleccionar el tipo especificado de elementos HTML, p {}
#carné de identidad	selector de ID	Seleccione Especifica el identificador de atributo de valor "id" cualquier tipo de elemento
.clase	selector de clase	Seleccionar cualquier número de elementos en el valor del atributo clase especificada de "clase" de cualquier tipo

Nada que decir, el funcionamiento básico

• la sintaxis del selector de nivel

selector	tipo	Descripción funcional
EF	selectores de descendientes (selectores incluidos)	F Seleccionar elementos coincidentes y los elementos de F emparejado está contenido dentro del elemento de adaptación E
E> F	selector de hijo	F elemento hijo seleccionado partidos de elementos, y que coincide con el elemento de los elementos que coinciden con E F
E + F	Selector de hermanos adyacentes	F detrás de la selección de elementos coincidentes y elementos coincidentes situado inmediatamente F coincidente elemento E
E ~ F	selector universal	F elemento seleccionado después de todos los elementos a Juego F, E y el elemento de adaptación situados

caso:

selectores de descendientes:

Los elementos de generación hijo, se incluyen los nietos

selector de hijo: No utilice el color de fondo aquí, porque la clase primaria será cubierta junto con subclases

Seleccionar sólo los niños de la etiqueta etiqueta

Al lado del selector de hermanos:

Seleccionar los primeros hermanos en el mismo directorio

selectores universales:

Seleccionar todo, incluyendo una subclase, nietos de clase en esta pestaña.

• la sintaxis del selector dinámico pseudo-clase

selector	tipo	Descripción funcional
E: link	selector de clase de pseudo enlace	Seleccione el elemento coincidente E, y el elemento fósforo se define como un hipervínculo no ha sido visitado. Comúnmente utilizado para describir el punto de enlace
E: visited	selector de clase de pseudo enlace	Seleccione el elemento coincidente E, y el elemento fósforo se define como un hipervínculo y ha sido visitado. Comúnmente utilizado para describir el punto de enlace
E: activa	selector de comportamiento de los usuarios	Seleccione el elemento coincidente E, y se activa el elemento coincidente. Comúnmente utilizado para describir los enlaces y botones puntos
E: hover	selector de comportamiento de los usuarios	Seleccione el elemento coincidente E, y el ratón del usuario sobre el elemento E. IE6 y por debajo de los soportes del navegador solamente a: hover
E: enfoque	selector de comportamiento de los usuarios	Seleccione el elemento coincidente E, y la obtención de elementos coincidentes de enfoque

Para el ajuste de los cuatro anclaje pseudo-clases, hay una advertencia, y que es su fin, dejar que ellos cumplen con el principio de un amor-odio / odio del amor, es decir, Enlace - visitados - libración - Active .

• : Hover se utiliza cuando el usuario mueve el ratón para efectuar los elementos anteriores;
• : Activa efecto por un usuario hace clic en un elemento de ese momento (lo que está sucediendo en ese momento, suelte el botón del ratón esta acción es acabada)
• : Foco elementos utilizados para ser el foco, esto se utiliza a menudo en los elementos del formulario.

• UI sintaxis selector pseudo-clase estado elemento

selector	Descripción funcional
E: verificado	Seleccionar los elementos de entrada seleccionados (sólo para botones de radio y casillas de verificación)
E: habilitado	Seleccione el elemento para permitir Estado
E: desactivado	Seleccionar una serie de elementos estatales con discapacidad
E: por defecto	Seleccione el elemento predeterminado
E: válido	Seleccionar según válidos o no válidos a un elemento de entrada de validación de entradas
E: en rango / : fuera de rango	Seleccione el elemento de entrada en el desarrollo de una gama de posiciones o restringido
E: required / : opcional	Según Permitir: atributo necesario elemento de entrada de selección

• estructura pseudo-clase usando la selección sintaxis

selector	Descripción funcional
E: first-child	A medida que el primer elemento hijo del elemento padre del elemento E. Y E: nth-child (1) equivalente
E: last-child	Como el último hijo del elemento padre del elemento E. Y E: nth-last-child (1) equivalente
E: root	Seleccionar coincida con el elemento raíz en el que el elemento E del documento. En el documento HTML, el elemento raíz es siempre el html, momento en el cual el mismo contenido con los partidos seleccionados selector de tipo html
EF: nth-child (n)	Seleccione el elemento padre del elemento enésimo de E F. En la que n puede ser un número entero (1,2,3), la palabra clave (par, impar), la fórmula puede ser un (2n + 1), el valor inicial y el valor de n es 1 en lugar de 0.
EF: nth-last-child (n)	Seleccione el elemento padre E en el elemento enésimo de la inversa de F. Este selector y E: nth-child (n) se calcula de forma secuencial, frente al selector, pero el uso del método es el mismo, en donde: n-ésimo de último niño (1) siempre que coincida con el último elemento, equivalente a la última-niño
E: n-ésimo de tipo (n)	Selección de un tipo determinado de elemento padre dentro del elemento de orden n de E
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

• 伪元素选择器

E:first-letter/E::first-letter：设置对象内的第一个字符的样式

E:first-line/E::first-line：设置对象内的第一行的样式

E:before/E::before：设置在对象前发生的内容，用来和content属性一起使用

E:after/E::after：设置在对象后发生的内容，用来和content属性一起使用

E::selection：设置对象被选中时的颜色

• 属性选择器

1. E[attr]：只使用属性名，但没有确定任何属性值；
2. E[attr="value"]：指定属性名，并指定了该属性的属性值；
3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;