Para alterar o estilo dos elementos que contêm vários parâmetros, foram introduzidos seletores de atributos no CSS. Eles permitem definir o estilo de uma tag com base na presença de um determinado parâmetro ou em seu valor. Nota: Os seletores de atributos são suportados pelo Internet Explorer versão 7.0 e posterior, e o <!DOCTYPE> correto deve ser adicionado para que os exemplos funcionem corretamente. Vejamos vários usos típicos de tais seletores.
Seletor de atributos simples
Define o estilo de um elemento se um atributo específico for especificado. Seu significado não é importante neste caso. A sintaxe para usar esse seletor é a seguinte.
[атрибут]{ Описание правил стиля } Селектор[атрибут]{ Описание правил стиля }
Não é permitido espaço entre o nome do seletor e colchetes. O Exemplo 12.1 mostra como a tag <Q> é estilizada quando um parâmetro title é adicionado a ela. Exemplo 12.1. Tipo de elemento dependendo do seu parâmetro
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">Q{
font-style: italic;/* Курсивное начертание */
quotes:"\00AB""\00BB";/* Меняем вид кавычек в цитате */}Q[title]{
color: maroon;/* Цвет текста */}</style></head><body><p>Продолжая известный закон Мерфи, который гласит:<q>Если неприятность
может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:<q title="Из законов Фергюсона-Мержевича">После
того, How веб-page будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом</q>.</p></body></html>
O resultado do exemplo é mostrado na Fig. 12.1 Neste exemplo, a cor do texto dentro do contêiner 7lt;Q> muda quando o parâmetro title é adicionado a ele. Observe que para o seletor Q[title] não há necessidade de repetir os atributos, pois eles são herdados do seletor Q.
Seletor de atributos com valor
Define o estilo de um elemento se um valor específico for especificado para um parâmetro específico. A sintaxe do aplicativo é a seguinte.
[атрибут="meaning"]{ Описание правил стиля } Селектор[атрибут="meaning"]{ Описание правил стиля }
No primeiro caso, o estilo é aplicado a todos os elementos que contêm o valor do atributo especificado. E no segundo - apenas para determinados seletores. O Exemplo 12.2 mostra como alterar o estilo do link se a tag A contiver um parâmetro target="_blank". Neste caso, o link será aberto em uma nova janela e para mostrar isso, usando estilos adicionamos uma pequena imagem na frente do texto do link. Exemplo 12.2. Estilo para abrir links em uma nova janela
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[target="_blank"]{
background:url(blank.gif) no-repeat 02px;/* Параметры фонового рисунка */
padding-left:15px;/* Смещаем текст вправо */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="link2" target="_blank">Ссылка в новом окне</a></p></body></html>
O resultado do exemplo é mostrado abaixo (Figura 12.2). Neste exemplo, uma imagem é adicionada ao link usando o atributo background. Sua função é criar uma imagem de fundo repetida, mas a repetição do fundo pode ser cancelada através do argumento no-repeat, resultando em uma única imagem.
O atributo começa com um valor específico
Define o estilo de um elemento se o atributo começar com o valor especificado. A sintaxe do aplicativo é a seguinte.
[атрибут^="meaning"]{ Описание правил стиля } Селектор[атрибут^="meaning"]{ Описание правил стиля }
No primeiro caso, o estilo é aplicado a todos os elementos que começam com o valor do atributo especificado. E no segundo - apenas para determinados seletores. Vamos supor que seu site precise separar o estilo dos links regulares e externos – links que levam a outros sites. Para evitar adicionar Auma nova classe à tag, usaremos seletores de atributos. Links externos são caracterizados por adicionar um protocolo ao endereço, por exemplo, o protocolo HTTP é usado para acessar documentos de hipertexto. Portanto, os links externos começam com a palavra-chave http://, e a adicionamos ao seletor A, conforme mostrado no exemplo 12.3. Exemplo 12.3. Alterando o estilo da refex
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href^="http://"]{
font-weight: bold;/* Жирное начертание */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="http://htmlbook.ru" target="_blank" rel="nofollow">Внешняя link на сайт htmlbook.ru</a></p></body></html>
O resultado do exemplo é mostrado abaixo (Fig. 12.3). Neste exemplo, os links externos estão destacados em negrito. Você também pode usar a técnica mostrada no Exemplo 12.2 e adicionar uma pequena imagem ao link, o que indicará que o link leva a outro site.
O atributo termina com um valor específico
Define o estilo de um elemento se o atributo terminar com o valor especificado. A sintaxe do aplicativo é a seguinte.
[атрибут$="meaning"]{ Описание правил стиля } Селектор[атрибут$="meaning"]{ Описание правил стиля }
No primeiro caso, o estilo é aplicado a todos os elementos que terminam com o valor do atributo especificado. E no segundo - apenas para determinados seletores. Desta forma, você pode separar automaticamente o estilo para sites do domínio ru e para sites de outros domínios como com, conforme mostrado no exemplo 12.4. Exemplo 12.4. Estilo para diferentes domínios
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">A[href$=".ru"]{/* Если link заканчивается на .ru */
background:url(ru.gif) no-repeat;/* Параметры фонового рисунка */
padding-left:10px;/* Смещаем текст вправо */}A[href$=".com"]{/* Если link заканчивается на .com */
background:url(com.gif) no-repeat;
padding-left:10px;}</style></head><body><p><a href="http://www.yandex.com" rel="nofollow">Yandex.Com</a>|<a href="http://www.yandex.ru" rel="nofollow">Yandex.Ru</a></p></body></html>
Este exemplo contém dois links que levam a domínios diferentes - come ru. Ao mesmo tempo, cada link tem sua própria imagem de fundo adicionada por meio de estilos. Os atributos de estilo serão adicionados apenas para os links hrefcujo parâmetro termina em “.ru” ou “.com”. Observe que ao adicionar uma barra ( http://www.yandex.ru/ ) ou o endereço da página ( http://www.yandex.ru/fun.html ) ao nome de domínio, alteraremos o final e o estilo não será aplicado. Nesse caso, é melhor utilizar um seletor no qual um valor específico possa estar localizado em qualquer lugar do atributo.
O valor ocorre em qualquer lugar do atributo
Existem opções quando o estilo deve ser aplicado a um seletor com um atributo específico, do qual um valor faz parte. Porém, não se sabe exatamente se o argumento começa ou termina com este valor. Então a seguinte sintaxe deve ser usada.
[атрибут*="meaning"]{ Описание правил стиля } Селектор[атрибут*="meaning"]{ Описание правил стиля }
O valor pode aparecer em qualquer lugar do argumento, como no início, no final ou em algum lugar intermediário. O principal é que faz parte. Assim, o Exemplo 12.5 mostra uma mudança no estilo dos links em que aparece a palavra “htmlbook”. Exemplo 12.5. Estilo para diferentes sites
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Селекторы атрибутов</title><style type="text/css">[href*="htmlbook"]{
background: yellow;/* Желтый цвет фона */}</style></head><body><p><a href="http://www.htmlbook.ru/html/" rel="nofollow">Tagи HTML</a>|<a href="http://stepbystep.htmlbook.ru" rel="nofollow">Шаг за шагом</a>|<a href="http://webimg.ru" rel="nofollow">Графика для Веб</a></p></body></html>
O resultado deste exemplo é mostrado na Fig. 12.4 Existem alguns outros tipos de seletores de argumentos, mas eles são usados muito raramente, por isso omitiremos sua descrição. Link para a fonte original: http://stepbystep.htmlbook.ru/?id=54
Nota: Os seletores de atributos são suportados pelo Internet Explorer versão 7.0 e posterior, e o <!DOCTYPE> correto deve ser adicionado para que os exemplos funcionem corretamente. Vejamos vários usos típicos de tais seletores.
Neste exemplo, a cor do texto dentro do contêiner 7lt;Q> muda quando o parâmetro title é adicionado a ele. Observe que para o seletor Q[title] não há necessidade de repetir os atributos, pois eles são herdados do seletor Q.
Neste exemplo, uma imagem é adicionada ao link usando o atributo 
Neste exemplo, os links externos estão destacados em negrito. Você também pode usar a técnica mostrada no Exemplo 12.2 e adicionar uma pequena imagem ao link, o que indicará que o link leva a outro site.
Existem alguns outros tipos de seletores de argumentos, mas eles são usados muito raramente, por isso omitiremos sua descrição. Link para a fonte original: http://stepbystep.htmlbook.ru/?id=54
GO TO FULL VERSION