css_selectors.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <style>
  6. body {
  7. color: red;
  8. }
  9. a {
  10. display: block;
  11. }
  12. a[href$=ends_1] {color: green;}
  13. a[href$='ends_2'] {color: green;}
  14. a[href$="ends_3"] {color: green;}
  15. a[href^=starts_1] {color: green;}
  16. a[href^='starts_2'] {color: green;}
  17. a[href^="starts_3"] {color: green;}
  18. a[href*=contains_1] {color: green;}
  19. a[href*='contains_2'] {color: green;}
  20. a[href*="contains_3"] {color: green;}
  21. a[target=equal_1] {color: green;}
  22. a[target='equal_2'] {color: green;}
  23. a[target="equal_3"] {color: green;}
  24. </style>
  25. </head>
  26. <body>
  27. <a href="#" target="equal_1">a[target=equal_1]</a>
  28. <a href="#" target="equal_2">a[target='equal_2']</a>
  29. <a href="#" target="equal_3">a[target="equal_3"]</a>
  30. <a href="test/ends_1">a[href$=ends_1]</a>
  31. <a href="test/ends_2">a[href$='ends_2']</a>
  32. <a href="test/ends_3">a[href$="ends_3"]</a>
  33. <p>
  34. <a href="test/contains_1/test">a[href*=contains_1]</a>
  35. <a href="test/contains_2/test">a[href*='contains_2']</a>
  36. <a href="test/contains_3/test">a[href*="contains_3"]</a>
  37. </p>
  38. <a href="starts_1/test">a[href^=starts_1]</a>
  39. <a href="starts_2/test">a[href^='starts_2']</a>
  40. <a href="starts_3/test">a[href^="starts_3"]</a>
  41. </body>
  42. </html>