| <!doctype html> |
| <html> |
| <head> |
| <style> |
| /* Specificity of (0, 1, 1). */ |
| p.target { |
| padding: 0; |
| } |
| |
| /* Specificity of (0, 1, 0). */ |
| .target { |
| background-color: red; |
| color: blue; |
| border: none; |
| } |
| |
| /* This should also have a specificity of (0, 1, 0). It should have higher precedence |
| than the previous rule due to the position in the stylesheet. */ |
| [data-webkit="rocks" i] { |
| background-color: lime; |
| border: 15px solid red; |
| padding: 25px; |
| font-weight: bold; |
| } |
| |
| /* Specificity of (0, 1, 0). */ |
| [data-webkit="rocks"] { |
| border: 3px dashed orange; |
| } |
| |
| /* Specificity of (0, 0, 1). */ |
| p { |
| margin: 2px; /* Ref-test must fix into 800*600, keep the margins small. */ |
| font-weight: normal; |
| } |
| |
| /* Specificity of (0, 0, 0). */ |
| * { |
| background-color: white; |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test the specificity of the case-insensitive attribute selector. If the test pass, each line should be styled as described by its text.</p> |
| <p data-webkit>Black text, white background, no border.</p> |
| <p class="target" data-webkit="ROCKS">Green background, bold blue text, solid red border.</p> |
| <p class="target" data-webkit="rocks">Green background, bold blue text, dashed orange border.</p> |
| <p class="target" data-webkit="Rocks">Green background, bold blue text, solid red border.</p> |
| </body> |
| </html> |
