English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
indica elementos com atributos nomeados, valor do atributo "value" ou com "value-" como prefixo ("-" como hífen, código Unicode U+002D) início. A aplicação típica é usada para coincidir códigos abreviados de idioma (como zh-CN, zh-TW pode usar zh como value).
Manual completo de seletores CSS
Selecione elementos cujo valor de atributo lang comece com "en" e configure seu estilo:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
[lang|=en]
{
fundo:amarelo;
}
</style>
</head>
<body>
<p lang="en">Hello!/p>
<p lang="en-us">Hi!/p>
<p lang="en-gb">Ello!/p>
<p lang="us">Hi!/p>
<p lang="no">Hei!/p>
<p><b>Atenção:/b>Se [<i>attribute</i>~=<i>value</i>] para o IE8 e versões anteriores, o DOCTYPE é obrigatório.</p>
</body>
</html>Teste e veja ‹/›[attribute|=value]seletor é usado para selecionar elementos cujo valor de atributo comece com o valor especificado.
Atenção:Este valor é a palavra inteira, seja sozinho como lang="en", ou como hífen - como lang=en-us todos podem.
IEFirefoxOperaChromeSafari
Todos os navegadores populares suportam[attribute|=value]seletor.
Atenção: [attribute|=value]no IE8em, deve ser declarado!DOCTYPE
Tutorial CSS: Seletor de atributo CSS
Selecione uma classe de atributo que comece com top e configure-a como vermelha:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style>
[class|=top]
{
fundo:red;
cor:branco;
}
</style>
</head>
<body>
<h1 class="top-header">Bem-vindo</h1>
<p class="top-text">Olá mundo!</p>
<p class="content">Você está aprendendo CSS?</p>
</body>
</html>Teste e veja ‹/›