O que faz um no CSS?

Eu usei CSS antes e me deparei com o estilo CSS abaixo, não tenho a menor idéia do que ele faz.

a[href^="http:"] { background: url(img/keys.gif) no-repeat right top; } a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] { background-image: none; padding-right:0; } 

 a[href^="http:"] 

Seleciona um elemento cujo valor de atributo href começa com http:

Por exemplo:

 p[title^="para"] {background: green;} 

Combinará o seguinte:

 

This paragraph should have a green background.

Esse é um dos seletores de atributos de correspondência de substrings disponíveis no CSS3. Ele corresponde a links com atributos href cujos valores iniciam com a string dada.

Para ilustrar, vamos pegar seu exemplo CSS e adicionar alguns padrões:

 a { background: none; padding: 0 1em; } a[href^="http:"] { background: url(img/keys.gif) no-repeat right top; } a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] { background-image: none; padding-right:0; } 

E estilize o seguinte HTML com ele. Os estilos de saída são resumidos nos comentários:

  

O que está acontecendo?

  1. Selecionado por a único
    O href="https://stackoverflow.com/index.php" deste elemento não inicia com http: ou com os outros valores.

    Não há fundo, mas há preenchimento esquerdo e direito.

  2. Selecionado por a[href^="http:"] somente
    O atributo href="http://example.com" deste elemento começa com http: mas não começa com http://mysite.com .

    Há preenchimento esquerdo e direito e uma imagem de fundo.

  3. Selecionado por a[href^="http:"] e a[href^="http://mysite.com"]
    O atributo href="http://mysite.com" deste elemento começa com http: e começa com http://mysite.com .

    Como o segundo seletor anula o primeiro seletor, a imagem de fundo e o preenchimento à direita são removidos.

  4. Selecionado por a[href^="http:"] e a[href^="http://www.mysite.com"]
    O atributo deste elemento começa com http: e começa com http://www.mysite.com (observe o www).

    Como o segundo seletor anula o primeiro seletor, a imagem de fundo e o preenchimento à direita são removidos.

  5. Selecionado por a[href^="http:"] e a[href^="http://mysite.com"]
    O atributo href="http://mysite.com/page.php" deste elemento começa com http: e começa com http://mysite.com .

    Observe que, comparado ao terceiro link, o atributo neste contém mais do que apenas o URL base; no entanto, o ^= indica que o valor do atributo precisa começar com o URL base do seu site, em vez de = que significaria “selecionar links que apontam apenas para http://mysite.com “. Portanto, esse link é correspondido pelo segundo seletor.

    Como o segundo seletor anula o primeiro seletor, a imagem de fundo e o preenchimento à direita são removidos.

Esses são os seletores attribute-starts-with , eles selecionam os elementos com um atributo href iniciando com esse valor, por exemplo, a[href^="http:"] corresponde a qualquer âncora com um href começando com href="http:...." , por exemplo:

 Test  Test  

Para cada link que é “href” parâmetro começa com “http:”, defina o plano de fundo para uma imagem-chave (sem repetição, posicionada no canto superior direito).

Para cada link que é “href” parâmetro começa com “http://mysite.com” ou “http://www.mysite.com”, defina a imagem de fundo para nada (eo preenchimento do lado direito para 0).

Para mim, isso parece um truque de CSS inteligente que fará com que seus usuários fiquem cientes de quando eles estão saindo do seu site por meio de um link externo, exibindo uma imagem-chave.

(Eu acho que vou usá-lo no futuro 🙂

As regras dizem, de acordo com os documentos do W3C :

  • Todas as âncoras que possuem um atributo href que começa com http:
  • Todas as âncoras que possuem um atributo href que começam com http://mysite.com ou http://www.mysite.com

É um seletor de atributos.
O ^ = parte significa que o atributo href das tags de âncora deve começar com http: no seu primeiro exemplo.