06.属性选择器.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. /*
  10. [属性名]:选择含有指定属性的元素
  11. [属性名=属性值]:选择含有指定属性和属性值的元素
  12. [属性名^=属性值]:选择属性值以指定值开头的元素
  13. [属性名$=属性值]:选择属性值以指定值结尾的元素
  14. [属性名*=属性值]:选择属性值中含有某个值的元素(不管值的位置)
  15. */
  16. /* p[title]{
  17. color: orange;
  18. } */
  19. /*
  20. 上面的p可以不写,省略p,就相当于写了*[title],也就是所有包含title属性的元素
  21. 而写了p,就表示p元素里面包含了title属性的元素
  22. */
  23. /* p[title = abc]{
  24. color: orange;
  25. } */
  26. /* p[title ^= abc]{
  27. color: orange;
  28. } */
  29. /* p[title $= abc]{
  30. color: orange;
  31. } */
  32. p[title *=abc] {
  33. color: orange;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <p title="abc">少小离家老大回</p>
  39. <p title="abcdef">乡音无改鬓毛衰</p>
  40. <p title="helloabc">儿童相见不相识</p>
  41. <p title="smile">笑问客从何处来</p>
  42. <p>落霞与孤鹜齐飞</p>
  43. <p>秋水共长天一色</p>
  44. </body>
  45. </html>