Embora você pense que o motivo pode ser um problema do navegador, é mais provável que sua definição de estilo seja uma ordem incorreta. Para garantir que você possa ver os estilos de conexão em diferentes estados, a ordem de estilo correta deve ser:
Link - Visitado - Passe o Rousão - Ativo ou LVHA (abreviação).
Conteúdo central:
Cada seletor tem uma especificidade. Se dois seletores forem aplicados ao mesmo elemento, os seletores com maior especificidade vencerão e terão prioridade. Por exemplo:
P.hithere {color: Green;} / * específico = 1,1 * /p {color: Red;} / * específico = 1 * / /
Qualquer conteúdo de parágrafo com classe de classe = até agora é exibido em verde em vez de vermelho. Ambos os seletores têm conjunto de cores, mas os seletores com maior especificidade vencerão.
Como as pseudo-classes afetam a especificidade? Eles têm exatamente o mesmo valor de ponderação, e os seguintes estilos têm o mesmo valor de ponderação específico:
A: link {color: blue;} / * específico = 1,1 * /a: ativo {color: vermelho;} / * específico = 1,1 * /a: hover {color: magenta;} / * específico = 1,1 * /a: visitado {color: purple;} / * específico = 1,1 * /
Essas são configurações de estilo para hiperlinks. Na maioria dos casos, vários desses estilos precisam ser definidos ao mesmo tempo. Por exemplo, um hiperlink não visitado pode ser definido em diferentes estilos na ativação do mouse e do mouse ao pairar e clicar. Como as três regras acima podem ser aplicadas aos hiperlinks, e todos os seletores têm a mesma especificidade e, de acordo com as regras, o último estilo vence. Portanto, o estilo ativo nunca será exibido, pois é sempre coberto pelo estilo pairar (ou seja, o mouse é preferido). Agora, vamos analisar qual é o efeito do mouseOver Hyperlink que foi visitado, e o resultado é sempre roxo :( porque seu estilo visitado sempre tem precedência sobre outras regras de estilo de estado (incluindo ativo e mouse).
É por isso que o CSS1 recomenda o pedido de estilo:
A: Linka: Visiteda: Hovera: Ativo
De fato, a ordem dos dois primeiros estilos pode ser trocada, porque um hiperlink não pode existir ao mesmo tempo que os estados não alcançados e acessados. (: link significa não visitado; não sei por que não é definido assim.)
O CSS2 agora permite que as pseudo-classes apareçam em grupos sindicais, por exemplo:
A: visitado: hover {cor: maroon;} / * específico = 2,1 * /a: link: hover {cor: magenta;} / * específico = 2,1 * /a: mouse: ativo {cor: ciano;} / * específico = 2,1 * /
Eles têm a mesma especificidade, mas se aplicam a bestas fundamentalmente diferentes e, portanto, não conflitam. Você pode obter combinações ativas, por exemplo.
Como entender a especificidade envolvida neste artigo? A especificidade pode ser entendida como uma string numérica que não está simplesmente conectada. Um exemplo acima: p.hithere {color: Green;} / * especificidade = 11 * /p {color: Red;} / * Especificidade = 1 * /
Esta parece ser uma operação simples baseada em decimal. No entanto, o cálculo da especificidade não pode usar algoritmos decimais. Por exemplo, se você usar 15 seletores juntos, seus valores ponderados específicos ainda serão inferiores aos seletores simples de classe. Por exemplo:
.hello {cor: vermelho;} / * específico = 10 * /html corporal div ul li li ul li li ul li li li (cor: verde;} / * específico = 15 * /
10 é na verdade uma especificidade que segue 1 e depois zero, não dez. Podemos usar hexadecimal para descrever as regras de estilo anterior, como as seguintes:
.hello {cor: vermelho;} / * específico = 10 * /html corporal div ul li li ul li li ul li li li (cor: verde;} / * específico = f * /
O único problema é que, se você deseja adicionar dois ou mais seletores à regra do segundo estilo, poderá obter um 17 específico que será confundido novamente. De fato, a especificidade pode ser infinita; portanto, para evitar mais confusão, é recomendável usar vírgulas para separar o valor específico.
O webmaster sugere: Repita o cálculo do valor ponderado da especificidade. A configuração do site CSS reflete sua capacidade de controlar a página. No desenvolvimento dinâmico de sites, o status do CSS também é muito importante. Leia mais informações, pratique mais e venha para wulin.com mais! Se você gosta deste site, promova -o em seu nome! Obrigado pela leitura.