Selector complejo [aprendizaje básico CSS]

Lección CSS 2-Selectores complejos

Selector de grupo

Formato

选择器1,选择器2,,,选择器n{声明的属性和属性值}

Ejemplo:

p,h1{
	color: blue;
}

Se utiliza para modificar el estilo de múltiples selectores. El selector compuesto por selectores simples puede ser cualquier combinación de selectores simples. Como se muestra en el ejemplo de código anterior, los colores de fuente de la etiqueta p y la etiqueta h1 se modifican.

Selector de atributos

Encuentra elementos basados ​​en nombres de atributos

Formato

元素[属性名]{
	声明的属性和属性值;
}

Ejemplo:

p[id]{
	color: blue;
}

Agregue el nombre del elemento al frente y luego agregue el nombre del atributo. Por ejemplo, en el ejemplo anterior, es la etiqueta p, que contiene el elemento con id, y luego establece el color de la fuente en azul.

Encuentre con precisión según el valor del atributo

Formato

元素[属性名=属性值]{
	声明的属性和属性值;
}

Ejemplo:

p[class = 'p2']{
	color: blue;
}

Es similar a la búsqueda anterior según el nombre del atributo, pero es más preciso. Es preciso al valor del atributo detrás del nombre del atributo. El ejemplo anterior es para la etiqueta p, excepto que la condición es una etiqueta p con un atributo de clase y el valor del atributo es p2. .

Selector de atributos múltiples

Formato

元素[属性名或属性表达式][属性名或属性表达式]..{
	声明的属性和属性值;
}

Ejemplo:

p[title][class]{
	color: blue;
}

Añadir después del elemento. Puede agregar + ∞ nombres de atributos o expresiones de atributos, pero no es necesario. El ejemplo anterior es: establecer el estilo de la etiqueta del párrafo p del atributo de título y el atributo de clase

Búsqueda aproximada basada en el valor del atributo

Formato

元素[元素名~=属性值]{
	声明的属性和属性值;
}

O

元素[属性名|=值]{
	声名的属性和属性值;
}

Ejemplo:

p[class~='red']{
	color: blue;
}

Tenga en cuenta que aquí está ~ =, que es aproximadamente igual a, es decir, encontrar una etiqueta que cumpla la condición de aproximadamente igual a. El ejemplo anterior es: establecer el valor del atributo de clase, incluida la etiqueta del nombre del atributo rojo

Buscar por etiqueta

Formato

元素名1~元素名2{
	声名的属性和属性值;
}

Ejemplo:

a~p{
	color: blue;
}

Cada etiqueta p después de una etiqueta ha sido modificada en estilo.

Selector derivado

Selector descendiente

Formato

父类标签 子类标签{ /*注意俩标签中间有空格*/
	声名的属性和属性值;
}

Ejemplo:

div strong{
	color: blue;
}

El selector descendente es una cadena compuesta por dos o más selectores simples separados por un carácter de espacio. Puede ser un nodo hijo directo o un nodo hijo indirecto. En el ejemplo anterior, se cambia el estilo de la etiqueta fuerte en el div. Modificado

Selector de elemento hijo

Formato

父标签>子标签{
	声名的属性和属性值;
}

Ejemplo:

div>p>strong{
	color: blue;
}

Utilice los nodos secundarios directos separados por>, por ejemplo, nodos secundarios directos en secuencia, y no puede saltar a otras etiquetas a la vez. El ejemplo anterior es buscar en el orden de div–> p–> fuerte, y luego modificar el estilo de la etiqueta fuerte .

Selector de hermanos adyacentes

Formato

父标签+子标签{
	声名的属性和属性值;
}

Ejemplo:

#div1 + p{
	color: blue;
}

Los selectores hermanos adyacentes pueden seleccionar el elemento inmediatamente después de otro elemento, y ambos tienen el mismo elemento padre. Nota: Al igual que con los subcombinadores, puede haber caracteres en blanco al lado de los hermanos adyacentes.

También soy un principiante en programación, y es inevitable que haya un error en la comprensión. Espero que después de leer, puedan comentar los errores, gracias