Existem quatro métodos de seleção mais comumente usados,
seleção de regra de ID, como
citar conteúdo
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
Seleção de regra de classe, como
citar conteúdo
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
Seleção de regra de tag, como
citar conteúdo
td { }
div > p { }
input[ type= "checkbox"] { }
Seletores uniformes, como
conteúdo de referência
*
: after
[hidden="true"]
Todos eles começam a corresponder da extremidade direita até o final de toda a regra na extremidade esquerda.
Há um problema. Por exemplo, a regra mais à direita já pode determinar o elemento que você deseja selecionar.
Mais correspondência de regras causará um desperdício de desempenho.
Por exemplo, div > p > span#demo{}
div > p > span não faz sentido algum.
Melhoria:
os IDs são únicos. Não há necessidade de anexar regras redundantes. Também pode ser combinado com precisão.
Citar conteúdo
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
O seguinte não deve aparecer Portanto, também pode ser otimizado.
Citando o conteúdo
button.toolbarButton { } -> .toolbarButton{}
usa muitas regras. É melhor atribuir uma classe diretamente ao elemento.
Por exemplo: div > p > span > a{}
pode fornecer um desempenho especial. Basta escrever uma aula diretamente.
Situações especiais requerem tratamento especial.
Por exemplo, às vezes você precisa garantir que a estrutura da página esteja limpa. Este método é usado para atender às necessidades de revisões posteriores. Também é possível. Encontre a melhor solução em equilíbrio.
Use herança
#demo .left{text-align:left} ->#demo{text-align:left}
Nota: XUL é usado no artigo original Para alunos que não foram expostos ao XUL, as tags podem parecer um pouco. estranho, mas não é difícil de entender.