Comentario: HTML5 ha agregado un nuevo selector de CSS y pseudocategoría. Este artículo ha compilado algunos y dio una introducción simple para usar. Los amigos que les gusta HTML5 pueden referirse a él. Espero que sea útil para todos.
SelectorP [nombre^= my] {font-size: 14px}
Selector ^= Las reglas se aplican a todas las etiquetas de elementos <p> con atributos de nombre que comienzan con mi
P [nombre $ = my] {Font-Size: 14px}
Selector $ = Reglas Aplicar a todos los atributos de nombre que terminan con mis etiquetas de elemento <p>
P [nombre*= my] {font-size: 14px}
Selector $ = Las reglas se aplican a todos los atributos de nombre que contienen los elementos <p> que terminan con mi
Selector>, +, ~
Selector> significa que el elemento afectado es un niño del primer elemento.
Selector + Este selector se refiere al elemento inmediatamente después del elemento, y estos dos elementos deben tener el mismo padre.
El selector ~ es similar a +, pero el elemento afectado no necesariamente sigue el primer elemento.
Agregue el nombre de la pseudo-clase y el elemento de referencia:
Ejemplo: MyClass: Nth-Child (2)
El segundo elemento en el elemento myclass
Palabra clave impar, incluso
MyClass: NTH-Child (ODD): afecta la posición del índice de su elemento principal con un número impar
myClass: en nth-child (incluso): afecta la posición del índice de su elemento principal es incluso
<estilo>
.test: enésimo hijo (impar)
{
Color: azul;
}
.Test: enésimo hijo (incluso)
{
Color: rojo;
}
.test: enésimo hijo (2)
{
Color: verde;
}
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
Los efectos son los siguientes:
1
2
1
2
1
2
Negar pseudo-clases
: no (p) {color: rojo}
Todos los demás elementos excepto el elemento <p> son rojos