Inducción de selector de uso común de CSS

Selector de elementos (el elemento es etiqueta, la etiqueta es elemento)

	作用:通过元素选择器可以选中页面中的所有指定元素
	语法:标签名{}

selector de id

	-通过我们的元素的id属性值选中唯一的一个元素
	-语法:
	#id属性值{}

Selector de clases

(Podemos establecer el atributo de clase para el elemento, similar al atributo id,
excepto que el atributo de clase puede repetirse Para
elementos con el mismo valor de atributo de clase, podemos decir que son un grupo de elementos
Puede establecer múltiples atributos de clase para un elemento al mismo tiempo valores, entre una pluralidad de valores separados por espacios)

-通过元素的class属性值选中一组元素
-语法:
	.class属性值{}

Agrupación de selectores (selector de unión)

	-通过选择器分组可以同时选中多个选择器对应的元素
	-语法:选择器1,选择器2,选择器3...选择器N{}

Selector de comodines

-可以选择页面中的所有元素
-语法:*{}

Selector compuesto (selector de intersección)

-作用:
	可以选中同时满足多个选择器的元素
-语法:
	-选择器1选择器2选择器N{}

Nota: Para nuestro selector de id, no se recomienda utilizar nuestro selector compuesto

Relación entre elementos
	父元素:直接包含子元素的元素
	子元素:直接被父元素包含的元素
	祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
	后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
	兄弟元素:拥有相同父元素的叫做兄弟元素

Selector de elemento descendiente

	-作用:选择指定元素的指定后代元素
	-语法:祖先元素 后代元素{}

Selector de elementos secundarios

	-作用:选中指定父元素的指定子元素	
	-语法:父元素>子元素

Los navegadores de IE6 y anteriores no son compatibles

Selector de pseudoclase

Las pseudoclases se utilizan específicamente para representar un estado especial de un elemento, como: hipervínculos visitados, como hipervínculos ordinarios, como cuadros de texto
que se enfocan Cuando necesitamos diseñar elementos en estos estados especiales time, puede usar pseudoclase

	:link
		-表示普通的链接(没有访问过的链接)
	:visited
		-表示访问过的链接

El navegador juzga si uno de nuestros enlaces ha sido visitado a través de registros históricos.
Debido a los problemas de privacidad de nuestros usuarios, la pseudoclase visitada solo puede establecer el color de la fuente (aquí solo IE6 puede establecer el color de fondo de la fuente)

	:hover
		-表示鼠标移入的一个状态		
	:active
		-表示超链接被点击的一个状态

Los dos anteriores también se pueden configurar para otros elementos (IE6 no admite la configuración de estas dos pseudoclases para elementos que no sean hipervínculos)

Los dos anteriores también se pueden configurar para otros elementos (IE6 no admite la configuración de estas dos pseudoclases para elementos que no sean hipervínculos)

	:focus
		-获取焦点
	:selection
		-选择的内容使用样式

Nota : Esta
pseudoclase debe escribirse de otra manera en Firefox: -moz-selection {} -moz- Logotipo específico de Firefox
Si necesita ser compatible con múltiples navegadores, aquí podemos usar estas dos oraciones al mismo tiempo

Selector de pseudoelementos

Utilice nuestro pseudo-elemento para representar algunas posiciones especiales en el elemento

:first-letter

	-为p中第一个字符元素来设置一个特殊的样式(首字母)

:first-line

	-为p中的第一行元素设置一个特殊样式(首行)

:before

	-表示元素最前面的位置(部分)

    -一般我们的before都需要结合content这个样式一起使用,

通过content也可以向before或after的位置添加一些内容

:after

    -表示元素最后面的位置(部分)结束标签的前面

Selector de atributos

作用:可以根据元素中的属性或属性值来选取指定元素

语法:

​			[属性名]选取含有指定属性的元素

​			[属性名="属性值"]选取含有指定属性值的元素

​			[属性名^="属性值"]选取属性值以指定内容开头的元素

​			[属性名$="属性值"]选取属性值以指定内容结尾的元素

​			[属性名*="属性值"]选取属性值以包含指定内容的元素

El atributo de título, este atributo se puede especificar para cualquier etiqueta, cuando la etiqueta se mueve al elemento, el valor del atributo de título del elemento se mostrará como el texto del mensaje.

Pseudoclases de elementos secundarios

:first-child 可以选中第一个子元素

:last-child 可以选中最后一个子元素

:nth-child(n)可以选择任意位置的子元素(n代表的是第几个元素)

该选择器的后面还可以指定一个参数,选定要选中的第几个子元素

even  表示偶数位置的子元素

odd   表示奇数位置的子元素



:first-of-type

:last-of-type

:nth-of-type

​上面三个和:first-child这些非常类似,只不过child,是在所有的子元素中进行排列,而type,是在当前的类型的子元素中进行排列


Selector de elementos hermanos

Siguiente selector de hermanos (selector de hermanos adyacentes)
作用:可以选中一个元素后紧挨着的指定的兄弟元素

语法:前一个+后一个
Seleccione todos los elementos hermanos detrás (selector de hermanos)
作用:选中该元素后面的所有兄弟元素

语法:前一个~后面所有

Pseudoclase negativa

作用:可以从已选中的元素中剔除出某些元素

语法:     :not(选择器)

Gráfico de resumen del selector CSS3

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_42592823/article/details/114850680
Recomendado
Clasificación