En CSS 3, supongamos que crea un archivo HTML que contiene la siguiente estructura de etiquetas:
<div id="nav-primario"></div>
<div id="contenido-primario"></div>
<div id="contenido-secundario"></div>
<div id="contenido-terciario"></div>
<div id="nav-secundario"></div>
Luego, en el archivo CSS
div[id^="nav"] { fondo:#ff0 }
Tenga en cuenta el " ^ "
CSS controlará [u]div#nav-primary y div#nav-secundario[/u] en este caso. Tenga en cuenta que estas dos etiquetas están precedidas por nav , no está claro si está separado por "-" o si la identificación coincide de adelante hacia atrás [sudor]
div[id$="primario"] { fondo:#ff0 }
Tenga en cuenta que es " $ "
CSS controlará [u]div#nav-primary y div#content-primary[/u] en este caso. Tenga en cuenta que hay una primar después de estas dos etiquetas. No está claro si "-" se usa como separación o si la identificación coincide de atrás hacia adelante [sudor].
div[id*="contenido"] { fondo:#ff0;
Tenga en cuenta que es " * "
CSS en este caso controlará [u]div#content-primary div#content-secundario y div#tertiary-content[/u]. Tenga en cuenta que todas estas etiquetas contienen contenido . No está claro si están separadas por "-" o si la identificación se escanea y compara automáticamente [sudor].
Parece que el autor dijo que estas etiquetas ahora son compatibles con las últimas versiones de varios navegadores excepto IE. Puedes probarlo, pero yo no lo intentaré ~ [risas].
div#content-primary:target { contorno:1px sólido #300 }
Tenga en cuenta que " :objetivo "
En este caso, CSS controlará el enlace ancla http://www.example.com/index.html #content-primary (el enlace ancla puede entenderse como un enlace dentro de una página web, comparado con el retorno visto en alguna web). páginas) arriba )
El autor dice que los navegadores Mozilla y Safari ahora soportan esto
entrada[tipo="texto"]: habilitado { fondo:#ffc }
entrada[tipo="texto"]: deshabilitado { fondo:#ddd }
Tenga en cuenta que " [type="text"]:enabled "
Este es el CSS que controla el formulario. "[u][type="text"][/u]" parece significar que el tipo del formulario es texto. . . ¿Cuál será [u]type="contraseña"[/u]?
entrada: marcado { borde: 1px sólido # 090 }
Tenga en cuenta que " :marcado "
Este es el CSS que controla la "selección" del formulario. . .
El autor dice que los navegadores Opera y Mozilla ahora soportan estos
:raíz {fondo:#ff0;
html {fondo:#ff0;
Por favor, preste atención a eso " :root "
Este ":root" es una etiqueta de nivel superior que html. Puedes leer este artículo escrito por Chidori Ichiba para comprender correctamente html y body. Descubrió en el artículo que hay un marco fuera de html, jeje ~.
El autor dice que los navegadores Mozilla y Safari ahora soportan esto
El siguiente : nth-child() es más interesante, jaja~ Puedes poner números y letras predeterminadas entre paréntesis~
p:nth-child(3) { color:#f00 }
Esto parece significar que, según la primera P que aparezca, todas las P que sean múltiplos de "3" serán controladas ~
p:nth-child(impar) { color:#f00 }
Esto parece significar que, según la primera P que aparezca, se controlarán todos los números impares de P ~
p:nth-child(par) { color:#f00 }
Esto parece significar que, según la primera P que aparezca, se controlarán todas las P en números pares ~
p:nth-child(3n+0) {color:#f00;
p:nth-child(3n) {color:#f00;
Estas dos etiquetas son equivalentes, porque el 0 después de la primera no tiene ningún efecto. Lo que significa es que se controlará la P que es 3 veces la primera P que aparece~ (Qué giro, HOHO~ [rolleyes]) En otras palabras. , esta "n" tomará un valor de 0.1.2.3.4.5.6....~ Se controlarán tantas P como puedas calcular. . .
tr:nth-child(2n+11) { fondo:#ff0;
Si comprende lo anterior, no es difícil de entender, pero la etiqueta que controla ha cambiado a "tr". Esto significa que la tabla se volverá más variada. Siento que todos deben ser buenos en aritmética en la escuela primaria y no aprender. Bueno, vete rápido a casa y vuelve a aprender algo de aritmética elemental. . . (Sin embargo, ¿esa etiqueta aumenta la eficiencia del procesamiento informático? [confundido] Espero que mi frustración sea innecesaria...)
p:último hijo {fondo:#ff0;
Se controla una p antes de p (NND, p va y viene, golpea a pp [sudor])
:not(p) { borde:1px sólido #ccc }
Esta p no está controlada, significa que usa su propio estilo. Debe usarse junto con las anteriores. . .
p ~ ul { fondo: #ff0 }
ul se muestra con prioridad sobre p. No sé qué método de prioridad es este. . .
Básicamente, eso es todo lo que puedo entender. Puedes ir a los dos sitios web siguientes para seguir aprendiendo. Si dije algo incorrecto, recuerda decírmelo.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectores-20051215/