Hay cuatro métodos de selección más utilizados,
selección de reglas de identificación, como
citar contenido
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
Selección de reglas de clase, como
citar contenido
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
Selección de reglas de etiquetas, como
citar contenido
td { }
div > p { }
input[ type= "checkbox"] { }
Selectores uniformes, como
contenido de referencia
*
: después de
[hidden="true"]
Todos comienzan a coincidir desde el extremo derecho hasta el final de toda la regla en el extremo izquierdo.
Hay un problema. Por ejemplo, la regla más a la derecha ya puede determinar el elemento que desea seleccionar.
Una mayor coincidencia de reglas provocará una pérdida de rendimiento.
Por ejemplo, div > p > span#demo{}
div > p > span no tiene ningún sentido.
Mejora:
las identificaciones son únicas. No es necesario adjuntar reglas redundantes. También se puede hacer coincidir con precisión.
Citar contenido
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
Lo siguiente no debería aparecer <a class="toolbarButton"></a>Por lo tanto, también se puede optimizar.
Citar el contenido
button.toolbarButton { } -> .toolbarButton{}
usa demasiadas reglas. Es mejor darle una clase directamente al elemento.
Por ejemplo: div > p > span > a{}
puede darle un rendimiento especial. Simplemente escribe una clase para un directamente.
Situaciones especiales requieren un tratamiento especial.
Por ejemplo, a veces es necesario asegurarse de que la estructura de la página esté limpia. Este método se utiliza para satisfacer las necesidades de revisiones posteriores. También es posible. Encuentre la mejor solución en equilibrio.
Usar herencia
#demo .left{text-align:left} ->#demo{text-align:left}
Nota: XUL se usa en el artículo original Para los estudiantes que no han estado expuestos a XUL, las etiquetas pueden verse un poco. extraño, pero no es difícil de entender.