English | česky | >> Português <<ZVON > Tutorials > CSS2 tutorial
>> Exemplo 7 << | Anterior | Próximo | Index | Conteúdos

Os elementos podem ser distinguidos de acordo com os seus atributos. Em (1) testamos se contém determinado atributo, enquanto que em (2) testamos se os seus valores podem ser comparados. Se usar o operator ~= para a comparação, então o valor comparado deve ser igual a qualquer parte do valor do atributo, desde que separada por espaços (3).

Documento XMLfolha de estilos CSSExemplo de ligação
(1)
     <AAA>
          <BBB number = "234">234</BBB>
          <BBB number = "222 345 234">222</BBB>
          <BBB number = "111 234">111</BBB>
          <BBB text = "xxx aaa bbb">xxx</BBB>
          <BBB text = "yyy">yyy</BBB>
          <BBB name = "bbb">bbb</BBB>
     </AAA>

BBB[text] {color:blue}
BBB[number] {color:red}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(2)
     <AAA>
          <BBB number = "234">234</BBB>
          <BBB number = "222 345 234">222</BBB>
          <BBB number = "111 234">111</BBB>
          <BBB text = "xxx aaa bbb">xxx</BBB>
          <BBB text = "yyy">yyy</BBB>
          <BBB name = "bbb">bbb</BBB>
     </AAA>

BBB[text="xxx aaa bbb"] {color:blue}
BBB[text='yyy'] {color:green}
BBB[number="111 234"] {color:red}
BBB[number='222 345 234'] {color:purple}
Ver resultado
Documento XMLfolha de estilos CSSExemplo de ligação
(3)
     <AAA>
          <BBB number = "234">234</BBB>
          <BBB number = "222 345 234">222</BBB>
          <BBB number = "111 234">111</BBB>
          <BBB text = "xxx aaa bbb">xxx</BBB>
          <BBB text = "yyy">yyy</BBB>
          <BBB name = "bbb">bbb</BBB>
     </AAA>

BBB[text~="aaa"] {color:blue}
BBB[number~="234"] {color:red}
Ver resultado