2_css选择器.html 1.0 KB

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. /* 标签选择器 通过标签名称选中要控制的元素 */
  9. /* div{
  10. color: red;
  11. } */
  12. /* 类选择器 通过类名选中要控制的元素 选择器前方要加上“.”*/
  13. /* .div1{
  14. color: red;
  15. } */
  16. /* id选择器 通过ID名称选中要控制的元素 选择器前方要加上“#” */
  17. #box{
  18. color: red;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <!-- class 给当前标签添加类名(别名) -->
  24. <!-- id 给标签赋值一个ID名称 并且不允许重复 -->
  25. <div class="div1" id="box">hello world</div>
  26. <div>你好世界</div>
  27. <div class="div1">你好</div>
  28. <!-- 行内样式(内联样式) 直接在标签中添加style属性 格式:style="属性名:属性值;" -->
  29. <div style="color: blue;">世界</div>
  30. </body>
  31. </html>