Seletor de Propriedade do CSS
- Página anterior Sprite de Imagem do CSS
- Próxima página Formulário do CSS
Definir estilos para elementos HTML com atributos específicos
Podemos definir estilos para elementos HTML com atributos ou valores de atributo específicos.
Seletor [attribute] CSS
O seletor [attribute] usado para selecionar elementos com o atributo especificado.
O exemplo a seguir seleciona todos os elementos <a> com a propriedade target;
Exemplo
a[target] {
background-color: yellow;
}
Seletor [attribute="value"] do CSS
O seletor [attribute="value"] usado para selecionar elementos com o atributo e valor especificados.
O exemplo a seguir seleciona todos os elementos <a> com a propriedade target="_blank":
Exemplo
a[target="_blank"] {
background-color: yellow;
}
Seletor [attribute~="value"] do CSS
O seletor [attribute~="value"]选取属性值包含指定词的元素。
O exemplo a seguir seleciona todos os elementos que contêm a palavra "flower" no atributo title:
Exemplo
[title~="flower"] {
border: 5px solid yellow;
}
Os exemplos acima correspondem aos seguintes elementos: title="flower", title="summer flower" e title="flower new", mas não correspondem: title="my-flower" ou title="flowers".
Seletor [attribute|="value"] do CSS
[attribute|="value"] Seletor usado para selecionar elementos com atributo especificado começando com o valor.
No exemplo a seguir, seleciona todos os elementos cujo atributo class começa com "top":
Comentário:O valor deve ser uma palavra completa ou única, por exemplo, class="top" ou seguido de hífen, por exemplo, class="top-text".
Exemplo
[class|="top"] {
background: yellow;
}
Seletor [attribute^="value"] do CSS
O seletor [attribute^="value"] é usado para selecionar elementos cujo atributo começa com o valor especificado.
No exemplo a seguir, seleciona todos os elementos cujo atributo class começa com "top":
Dica:O valor não precisa ser uma palavra completa!
Exemplo
[class^="top"] {
background: yellow;
}
Seletor [attribute$="value"] do CSS
O seletor [attribute$="value"] é usado para selecionar elementos cujo atributo termina com o valor especificado.
No exemplo a seguir, seleciona todos os elementos cujo atributo class termina com "test":
Dica:O valor não precisa ser uma palavra completa!
Exemplo
[class$="test"] {
background: yellow;
}
Seletor [attribute*="value"] do CSS
O seletor [attribute*="value"] seleciona elementos cujo valor do atributo contém a palavra especificada.
No exemplo a seguir, seleciona todos os elementos cujo atributo class contém "te":
Dica:O valor não precisa ser uma palavra completa!
Exemplo
[class*="te"] {
background: yellow;
}
Estilizar formulários
Se precisar estilizar formulários sem class ou id, os seletores de atributo são úteis:
Exemplo
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Dica:Acesse nossa Tutorial de CSS para formulários，para obter mais informações sobre como usar CSS para estilizar formulários.
Todos os seletores de atributo CSS
| Seletor | Exemplo | Descrição do exemplo |
|---|---|---|
| [attribute] | [target] | Selecione todos os elementos que tenham o atributo target. |
| [attribute=value] | [target=_blank] | Selecione todos os elementos que tenham o atributo target igual a "_blank". |
| [attribute~=value] | [title~=flower] | Selecione todos os elementos que tenham o atributo title contendo a palavra "flower". |
| [attribute|=value] | [lang|=en] | Selecione todos os elementos que tenham o atributo lang começando com "en". |
| [attribute^=value] | a[href^="https"] | Selecione cada elemento <a> cujo valor do atributo href começa com "https". |
| [attribute$=value] | a[href$=".pdf"] | Selecione cada elemento <a> cujo valor do atributo href termina com ".pdf". |
| [attribute*=value] | a[href*="codew3c"] | Escolher cada elemento <a> cujo valor de atributo href contenha a substring "codew3c". |
Leitura adicional
Livro de texto:Explicação do seletor de atributo CSS
- Página anterior Sprite de Imagem do CSS
- Próxima página Formulário do CSS
