Um olhar sobre o seletor da negação CSS3 (NÃO)
CSS tem alguns seletores que permitem selecionar elementos em certas condições, como :flutuar, :foco, :ativo, etc Ainda hoje não vamos cobrir esses seletores. Vamos olhar em um que ainda é um método pouco conhecido, mas usado pela maioria dos web designers - que é o :não selector ou também conhecido como seletor de negação.
O que isso faz?
Tenho certeza de que o :não próprio nome já descreveu sua função, que ele simplesmente selecionará o oposto do elemento ou condição especificada. Por exemplo:
Esta sintaxe selecionará qualquer elemento diferente de p (parágrafo).
: não (p) Embora a sintaxe de exemplo abaixo selecione o div elemento que faz não tem aula abc
div: não (.abc) Tudo bem, agora, vamos tentar este seletor em um exemplo real:
Primeiro de tudo, vamos fazer alguns parágrafos com alguns links da Wikipedia e alguns links com domínios fictícios. Aqui está a marcação HTML para o parágrafo.
O CSS: não Selector Demo
Jujuba applicake gergelim snaps chupa chups bolo de chocolate. Bolo de aveia marshmallow wypas caramelo donut bolo. Chupa Chups geléia cupcake gummi ursos. Bolacha de bolo de gotas de limão.
Bolo de chocolate com queijo donut geléia doce rolo de pó soufflà ??  © bolo de chocolate. Doce do algodão doce de Wypas deixa cair o maçapão do bombom da filhós dos doces do biscoito. Geléia de alcaçuz doces de macaroon. Torta de chocolate doce rolo doce marshmallow dragÃ? Ã?  © e algodão doce brownie marshmallow.
Pudim avantajando a garra de urso do marshmallow. Guloseimas de pastelaria brownie de bolo de frutas geléia de gengibre gergelim snaps. Garra de urso do queque do pudim de doces. Queque do rolo do tootsie do algodão doce do muffin do bolo de cenoura. Feijão de geléia tart dragà ?? à ¥  © e doce de confeiteiro barra de chocolate de cobertura de bolacha. Doce de amêndoa de açúcar de caramelo de rolo doce dragà ??  bolinho de bombons.
Bolo de maçapão applicake pastelaria wypas fruitcake. Os wypas do chocolate do bolo da aveia arrastam a cereja do bolo de cenoura da cenoura do açúcar da ameixa. Barra de chocolate dos jujuba da torta do queque da bolacha do croissant da barra de chocolate dos caramelos. Biscoito candy canes dragà  à © © © e.Candy brownie bolo de aveia gergelim snaps cheesecake pó tootsie rolo biscoito urso garra. Soufflà ??  © gummi ursos jujubas gergelim snaps faworki bolinho sobremesa bombom doce.
O plano aqui é: vamos selecionar apenas os links que não estão apontando para a Wikipedia e, em seguida, dar a esses links um ponto de exclamação para alertar sobre esses links..
Primeiro, vamos adicionar um :depois de pseudo-elemento em todos os links para colocar a marca, e nós definimos como um inline-block elemento.
a: depois de display: inline-block;
Então, para selecionar cada link que não está apontando para a Wikipedia, vamos combinar o :não seletor com um seletor de atributos. O seletor de atributo aqui selecionará todas as tags de âncora com as quais o atributo href começa http://en.wikipedia.org/ e combinando-o com o :não, Obviamente, selecionará o oposto. Aqui vamos nos:
a: não ([href ^ = "http://en.wikipedia.org/"]): após background-color: # F8EEBD; borda: 1px sólido # EEC56D; border-radius: 3px 3px 3px 3px; cor: # B0811E; conteúdo: "!"; tamanho da fonte: 10pt; margin-left: 5px; preenchimento: 1px 6px; posição: relativa;
Funciona! As tags de âncora que não apontam para a Wikipedia agora têm um ponto de exclamação.
Bug do Chrome
Se você visualizar isso no Chrome, perceberá que o efeito renderizado não é como acima. Todos os links parecem ter um ponto de exclamação, independentemente do URL.
Este caso foi realmente tratado como um bug. Então, para corrigir esse bug, precisamos adicionar essa regra.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / exibição: inline-block;
E agora o problema deveria ter sido corrigido.
- Demonstração
Conclusão
Em algumas circunstâncias, usando o :não O seletor é realmente a opção mais eficaz, assim como o exemplo acima, em que podemos selecionar alguns elementos aleatórios sem adicionar classes desnecessárias ou marcações adicionais ao documento.
Você pode realmente construir grandes efeitos utilizando este seletor, e este é um exemplo: Funcionalidade de Filtro com CSS3
